Question

我正在寻找使用文本的方向或最佳实践。我正在尝试在一个较小的区域中构建一个包含图像和名称的气泡。我希望文本居中。您会使用什么策略？在处理文字时，我似乎总是遇到问题

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>

Answer 1

如果要在一个框内垂直和水平居中放置文本，可以使用flexbox。将这些样式添加到您的盒子中

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

如果您想了解有关flexbox的更多信息，则有一个很好的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

div中的文本不会到达div的中间

1 个答案: