Question

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;
    }

Answer 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，因为您已经在使用bootstrap网格

为什么此文本对齐中心无法正常使用margin 0 auto？

1 个答案: