1. 首頁
  2. 問答
  3. 中心響應圖像

中心響應圖像

2017-02-20 89 views
2

我的圖片不會margin: 0 auto;或padding: 0 auto; 中心還，如果我在它周圍的<div>做text-align: center;這是行不通的。 我認爲這是因爲圖像響應。 那麼如何讓這些圖像居中呢？中心響應圖像

@media only screen and (min-width: 1001px) { 
 
    .gallerij { 
 
    max-width: 825px; 
 
    margin: 20px auto; 
 
    padding: 0 10px 30px 200px; 
 
    } 
 
} 
 

 
.gallerij h1 { 
 
    margin-left: 10px; 
 
} 
 

 
.gallerij div.img { 
 
    border: 1px solid #ccc; 
 
    padding: 0; 
 
    margin-top: 10px; 
 
    background-color: rgba(211, 211, 211, 0.30); 
 
} 
 

 
.gallerij div.img:hover { 
 
    border: 1px solid #000000; 
 
} 
 

 
.gallerij div.img img { 
 
    display: block; 
 
    width: auto; 
 
    max-width: 100%; 
 
    height: 200px; 
 
    padding: 3px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.gallerij div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 

 
.gallerij * { 
 
    box-sizing: border-box; 
 
} 
 

 
.responsive { 
 
    padding: 0 6px; 
 
    float: left; 
 
    width: 24.9999%; 
 
    max-width: 200px; 
 
} 
 

 
@media only screen and (max-width: 700px) { 
 
    .responsive { 
 
    width: 49.99999%; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 500px) { 
 
    .responsive { 
 
    width: 100%; 
 
    } 
 
} 
 

 
.gallerij .clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
    margin-bottom: 30px; 
 
}
<div class="gallerij"> 
 
    <h1 class="page-titel">All articles:</h1><br> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img2.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img4.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img3.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img3.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img3.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img3.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img3.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img3.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
</div>

的HTML看起來那麼久，因爲我必須做更多的圖像，所以你能明白我的意思。當你點擊「完整頁面」時，他們將在彼此旁邊的4張圖像中，在這個小小的（可能）3中，我不知道是否可以使它變小，但隨後它會去2個圖像，最後是1. 當它3和4它居中，但當它在2或1時，它不會居中了。 Idk，如果你能看到它沒有集中在片段中，所以我會粘貼一些打印屏幕來顯示它。

2圖像旁邊的海誓山盟：
2 images next to eachother

1圖像：
1 image

唯一的問題是，他們不集中，我無法找到該怎麼做。

您需要更多的代碼或信息？

來源

2017-02-20 Minegolfer

+0

：0汽車;'您需要提供的寬度，而不是'auto' – zgood

+2

浴液無法比擬的。確保圖像顯示：塊也。 （它們應該是自然而然的）。 –

+0

爲什麼.responsive的最大寬度是200px？這不會覆蓋任何地方，這可能是你的問題？您唯一要重寫的是媒體查詢的寬度。 –

回答

1

包裹在一個總體DIV您的圖像，和中心與flexbox。

或者，從您的物品中取出float:left，將它們製作成display:inline-block，然後用text-align:center將它們包裝在一個格子中。

Flexbox的例子：

<div style=" 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: center; 
"> 
    <div class="responsive"> 
     <div class="img"> 
      <a href="#"> 
       <img src="img/ERD_Easy/img2.jpg" alt="" class="article-img"> 
      </a> 
      <div class="desc">Artikel naam + kleine bescrijving</div> 
     </div> 
    </div> 
    ... 
</div>

沒有Flexbox的解決方案：

<div style="text-align:center;"> 
    <div class="responsive" style="float:none;display:inline-block;"> 
     <div class="img"> 
      <a href="#"> 
       <img src="img/ERD_Easy/img2.jpg" alt="" class="article-img"> 
      </a> 
      <div class="desc">Artikel naam + kleine bescrijving</div> 
     </div> 
    </div> 
    ... 
</div>

來源

2017-02-20 15:25:36 Eamonn

+0

我沒有在我的網站中使用任何fletbox。那麼我可以用fletbox添加1個東西嗎？我以爲你必須讓你的整個網站fletbox。 – Minegolfer

+0

不，您不需要，如果您不想使用它，我還添加了非柔線盒選項。 – Eamonn

+0

我認爲這是答案，但是當我再次使我的網頁變大時，它不會使用我已經給予它的寬度。我打算給我的問題添加打印屏幕 – Minegolfer

0

這應該工作：

.gallerij { 
    width: 420px; 
    margin: 0 auto; 
}

來源

2017-02-20 15:25:23 Vcasso

+0

我不能給它一個標準。我希望它是最大寬度爲825px的屏幕的100％，但是如果我使它成爲 '.gallerij {100}。 max-width：825px; margin：0 auto; }' – Minegolfer

1

我想這可能是你想要什麼？ 確保您刪除了浮動圖形，以便將圖像從浮動狀態重置到左側。 還增加了一個邊距：0自動; （或圖像容器上的文本對齊中心）然而，你想要做那件事。

@media only screen and (min-width: 1001px) { 
 
    .gallerij { 
 
    max-width: 825px; 
 
    margin: 20px auto; 
 
    padding: 0 10px 30px 200px; 
 
    } 
 
} 
 

 
.gallerij h1 { 
 
    margin-left: 10px; 
 
} 
 

 
.gallerij div.img { 
 
    border: 1px solid #ccc; 
 
    padding: 0; 
 
    margin-top: 10px; 
 
    background-color: rgba(211, 211, 211, 0.30); 
 
} 
 

 
.gallerij div.img:hover { 
 
    border: 1px solid #000000; 
 
} 
 

 
.gallerij div.img img { 
 
    display: block; 
 
    width: auto; 
 
    max-width: 100%; 
 
    height: 200px; 
 
    padding: 3px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.gallerij div.desc { 
 
    padding: 15px; 
 
    text-align: center; 
 
} 
 

 
.gallerij * { 
 
    box-sizing: border-box; 
 
} 
 

 
.responsive { 
 
    padding: 0 6px; 
 
    float: left; 
 
    width: 24.9999%; 
 
    max-width: 200px; 
 
} 
 

 
@media only screen and (max-width: 700px) { 
 
    .responsive { 
 
    width: 49.99999%; 
 
    float: none; 
 
    margin: 0 auto; 
 
    } 
 
} 
 

 
@media only screen and (max-width: 500px) { 
 
    .responsive { 
 
    width: 100%; 
 
    } 
 
} 
 

 
.gallerij .clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
    margin-bottom: 30px; 
 
}
<div class="gallerij"> 
 
    <h1 class="page-titel">All articles:</h1><br> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img2.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img4.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img3.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img3.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img3.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img3.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img3.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="responsive"> 
 
    <div class="img"> 
 
     <a href="#"> 
 
     <img src="img/ERD_Easy/img3.jpg" alt="" class="article-img"> 
 
     </a> 
 
     <div class="desc">Artikel naam + kleine bescrijving</div> 
 
    </div> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
</div>

如果你想中心，`保證金圖像

來源

2017-02-20 15:40:16

+0

它工作正常，但其他人只是有與你發佈的相同的答案 – Minegolfer

+0

我知道，我看着他編輯他的帖子後，我的評論你的原始帖子上面哈哈。 所有重要的是你得到它的工作，並很高興你最終得出一個好的結論。 –

+0

我以爲我知道它的工作，但似乎發生了一個新問題。 – Minegolfer

相關問題

 相關問題