使用Flex在div内居中文本

Question

我正在尝试拆分div "Info"分成三个部分，将各部分均匀划分。我想我一开始的做法是正确的，但我在标题(地址、工作时间、联系方式)中出现了问题。下面的例子是我如何尝试让它看起来。谢谢你的宝贵时间。

例子

.info{
display: flex;
justify-content: space-between;
}

<div class="info">
<div class="left-info">
<div class="address-title">
Address
</div>
<div class="address">
1111 Some Words, Tampa, FL 33647, United States
</div>
</div>
<div class="middle-info">
<div class="hours-title">
Hours
</div>
<div class="hours">
Mon-Fri
</div>
</div>
<div class="right-info">
<div class="contact-title">
Contact
</div>
<div class="contact">
111-111-1111
</div>
</div>
</div>

Answer 1

试试这个。我将width: 33%赋给.info中的每个div以便将整个宽度分成三个相等的宽度。另外，将text-align: center分配给个别div。

.info {
display: flex;
justify-content: space-between;
}
.left-info,
.right-info,
.middle-info {
width: 33%;
text-align: center;
}

<div class="info">
<div class="left-info">
<div class="address-title">
Address
</div>
<div class="address">
1111 Some Words, Tampa, FL 33647, United States
</div>
</div>
<div class="middle-info">
<div class="hours-title">
Hours
</div>
<div class="hours">
Mon-Fri
</div>
</div>
<div class="right-info">
<div class="contact-title">
Contact
</div>
<div class="contact">
111-111-1111
</div>
</div>
</div>

我希望这对你有帮助。