-1

I am looking for some direction or best practice with working with text. I am trying to build a bubble that holds a image and then a name in a small area. I would like the text to be centered. what strategy would you use? I seem to always have issues when working with text

body {
  background: black;
}

.oval {
  width: 150px;
  height: 50px;
  border: 2px solid white;
  border-radius: 500px;
  color: white;
  margin-top: 200px;
  display: flex;
  align-items: center;
}

.oval>#us_flag {
  background: url('https://res.cloudinary.com/mikebeers/image/upload/v1552151059/us_zsvoel.png');
  background-size: cover;
  background-position: center center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-top-left-radius: 500px;
  border-bottom-left-radius: 500px;
  /* border: 2px solid red; */
  max-height: 50px;
}

.oval>#text {
  border: 2px solid red;
  font-size: .9em;
  line-height: 2em;
  padding: 0;
  display: flex;
  align-content: center;
  height: 100%;
}

#text>p {
  /* border: 1px solid green; */
  word-break: keep-all;
  padding: 0;
}
<div class="container-fluid">
  <div class="row oval">
    <div class="col-4" id="us_flag">
    </div>

    <div class="col-8" id='text'>
      <p>United States</p>
    </div>
  </div>
</div>
Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
Mike Beers
  • 63
  • 12

1 Answers1

2

If you want to center your text vertically and horizontally in a box, you can use flexbox. Add these styles to your box

display: flex;
justify-content: center;
align-items: center;

If you want to learn more about flexbox, there is a good guide for it: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

fatihsolhan
  • 565
  • 5
  • 19
  • I am using flex box. Just align items: center. It does not seem to be moving to center – Mike Beers Mar 09 '19 at 17:50
  • 1
    Your `p` element has a margin-bottom by default. Remove it by `margin:0;` Also you should use `align-items` instead of `align-content` in the `.oval > #text` @MikeBeers – fatihsolhan Mar 09 '19 at 17:55