Question

目前，我的图片旁边有文字。我希望它移动到文本在图像下方的位置，并且当视口小于500px时图像居中。

HTML

<div class="container">
  <div class="row">
    <div class=".col-xs-6 .col-md-4" id="whoBox" style="padding-bottom: 15px;">
      <div id="whoPic">
          <img src="myImgUrl">
      </div>
      <div class="wordBlock">
          <p>lorem ipsum</p>
          <p>lorem ipsum</p>
          <p>lorem ipsum</p>
          <p>lorem ipsum</p>
      </div>
    </div>
  </div>
</div>

CSS

@media (max-width: 500px) {
    .wordBlock {
        float: none;
        width: 100%;
        display: inline-block;
        text-align: center;
    }
    div.row #whoPic {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        display: block;
    }
    .whoBox {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

正如您所看到的，我一直在尝试使用flexbox，text-align等。我也尝试了margin: auto;。我试过调用所有img，图片的ID #whoPic，我尝试调用div ID #whoBox。

在修改不在@media规则中的原始CSS时，它确实有效。

编辑：这是有效的。我可以发誓说我在发布问题之前尝试了这个，但它一定是在别的东西上。

div.row #whoPic {
    float: none;
    text-align: center;

Answer 1

这是因为你正在使用diplay flex，并在同一个div中显示块，从#whoPic中移除显示块

div.row #whoPic {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
 }

Answer 2

将此类添加到您的img标记。

类=＆＃34; IMG响应＆＃34;

希望它有所帮助。

Answer 3

您可以不使用flex属性只需添加此

div.row #whoPic img { 
        display:block;
        margin:auto;   }
   }

视口宽度中心img不起作用？

3 个答案: