居中圖像視口寬度不起作用？

目前，我在圖片旁邊有文字。我希望它移動到文本在圖像下方的位置，並且當視口小於500像素時圖像居中。居中圖像視口寬度不起作用？

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，我試過撥打ID #whoBox。

修改不在@media規則中的原始CSS時，它可以工作。

編輯：這是什麼工作。在發佈我的問題之前，我可以發誓我已經嘗試過了，但它一定是在其他方面。

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

來源

2017-08-10 David

這是因爲你使用的diplay彎曲，並在同一個div顯示塊，從#whoPic

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

來源

2017-08-10 04:23:15

@大衛Risa__B是正確的，你也可以刪除保證金：0汽車 –

這裏是結束了工作。我可以發誓我嘗試過，但它一定是在一個不同的班上，我嘗試過。 div.row #whoPic {float：none; float; none; text-align：center; – David

哦，好吧，我明白了，你被賦予了#whoPic和.wordBlock –

刪除顯示塊這個類添加到您的img標籤。

class =「img-responsive」

希望它有幫助。

來源

2017-08-10 04:28:24

你可以不使用Flex屬性只需添加這

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

來源

2017-08-10 05:50:04 Shube

居中圖像視口寬度不起作用？

回答

相關問題