<分区>
<分区>
我正在寻找处理文本的方向或最佳实践。我正在尝试构建一个包含图像的气泡，然后在一个小区域中包含一个名称。我希望文本居中。你会使用什么策略？我在处理文本时似乎总是遇到问题
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>最佳答案
如果你想让你的文本在一个盒子里垂直和水平居中，你可以使用 flexbox。将这些样式添加到您的盒子中
display: flex;
justify-content: center;
align-items: center;
如果你想了解更多关于 flexbox 的知识，有一个很好的指南:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
关于html - div 中的文本不会位于 div 的中间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55080168/