为什么这个文本对齐中心不能与边距 0 自动正常工作？答案

【问题标题】：Why is this text-align center is not working properly with margin 0 auto?为什么这个文本对齐中心不能与边距 0 自动正常工作？
【发布时间】：2018-04-14 16:15:26
【问题描述】：

jsfiddle（增加窗口大小）https://jsfiddle.net/aq9Laaew/5793/ 文本 hello world 未在图像下方的中心对齐。如果您将图像更改为较大的http://i.imgur.com/VjHAT.jpg，那么您将不会看到此问题。如何解决这个问题？

 <div class="img-thumbnail blogborder">
<div class="row">
<div class="col-md-6">
    <div class=bodytitle>Title</div>
  <img class="rounded img-fluid img-thumbnail" src="https://i.imgur.com/6DcuZx6.jpg">
</div>
</div>
<div class="content">Hello World</div>
</div>

css

.col-md-6{
    margin: 0 auto;
    padding: 0;
}

    .content {
        text-align: center;
        font-family: 'Josefin Sans', sans-serif;
    }

【问题讨论】：

标签： css bootstrap-4

【解决方案1】：

您的文本居中对齐，只需对齐您的 col-md-6 项目，即您的图像，我建议将您的标记更改为如下所示

<div class="col-md-6 text-center"> <div class=bodytitle>Title</div> <img class="rounded img-fluid img-thumbnail" src="http://i.imgur.com/VjHAT.jpg"> </div>

将text-center 添加到 div 将有助于将内容与中心对齐。进一步阅读可以在bootstrap docs here 看到。此外，最好删除您在 col-md-6 上获得的样式覆盖并关注 justify-content 和 align-items，因为您已经在使用引导网格

【讨论】：