圖居中抹灰圖像

事先我感謝所有幫助，因爲即時通訊新的HTML和CSS我可以，我想中心的3張圖片，但我不能居中它們，我確信它的一些愚蠢的，但我不能算出它出。我添加了一個圖像，以便您可以看到佈局是什麼。圖居中抹灰圖像

body { 
 
\t font-family: Arial, Verdana, sans-serif; 
 
\t color: #000; 
 
\t font-weight: bold; 
 
\t margin: 0; 
 
} 
 

 
#wrapper { 
 
\t width: 100%; 
 
} 
 

 
#logo { 
 
\t float: left; 
 

 
} 
 

 
#navigation { 
 
\t clear: both; 
 
\t background-color: #14171a; 
 
\t width: 100%; 
 
\t height: 70px; 
 
\t box-shadow: 0px 5px 3px #000; 
 

 

 
} 
 

 
#navigation ul li { 
 
\t display: inline; 
 
\t margin-left: 50px; 
 

 

 
} 
 

 
#navigation ul li a { 
 
\t text-decoration: none; 
 
\t color: #fff; 
 
\t font-size: 20px; 
 
} 
 

 
#navigation ul { 
 
\t width: 570px; 
 
\t padding-top: 20px; 
 
\t margin: 0px auto 0px auto; 
 
} 
 

 
#midcontent { 
 
\t 
 
} 
 

 
h1 { 
 
\t margin: 0px auto 0px auto; 
 
\t margin-top: 50px; 
 
\t padding: 10px 0px 10px 10px; 
 
\t color: #fff; 
 
\t background-color: #6ac045; 
 
\t font-size: 170%; 
 
\t 
 
\t border-radius: 8px; 
 
\t width: 400px; 
 
} 
 

 
#midcontent article { 
 

 
\t } 
 

 
figure { 
 
    \t float: left; 
 
\t width: 300px; 
 
\t 
 
\t 
 
} 
 

 
figure img { 
 

 
\t display: inline-block; 
 
\t width: 300px; 
 
\t height: 244px; 
 
} 
 

 
figcaption { 
 
\t text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Electronix CR</title> 
 
\t <link rel="stylesheet" type="text/css" href="CSS/Electronix.css"> 
 
</head> 
 
\t <body> 
 
\t \t <div id="wrapper"> 
 
\t \t \t <header id="logo"> 
 
\t \t \t \t <img src="images/Electronix.png"> 
 
\t \t \t </header> 
 
\t \t \t <nav id="navigation"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="#">Home</a></li> 
 
\t \t \t \t \t <li><a href="#">About</a></li> 
 
\t \t \t \t \t <li><a href="#">Services</a></li> 
 
\t \t \t \t \t <li><a href="#">Contact</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav> 
 
\t \t \t <h1>What can we fix for you today</h1> 
 
\t \t \t <section id="midcontent"> 
 
\t \t \t \t <article class="content"> 
 
\t \t \t \t \t <figure><img src="images/Diagnostic.jpg" alt="Helianthus" /> 
 
\t \t \t \t \t <figcaption>Siagnostic</figcaption> 
 
\t \t \t \t </figure> 
 
\t \t \t \t <figure><img src="images/LCD.jpg" alt="Passiflora" /> 
 
\t \t \t \t \t <figcaption>LCD Replacement</figcaption> 
 
\t \t \t \t </figure> 
 
\t \t \t \t <figure><img src="images/Battery.jpg" alt="Nyctocalos" /> 
 
\t \t \t \t \t <figcaption>Battery Replacement</figcaption> 
 
\t \t \t \t </figure> 
 
\t \t \t \t </article> 
 
\t \t \t </section> 
 
\t \t \t 
 
\t \t </div> 
 
\t </body> 
 
</html>

來源

2016-04-27 Sidney Vogel

[定心浮動的div另一個專區內（http://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div）或可能重複[我怎樣中心浮動元素？]（http://stackoverflow.com/q/4767971/5743988） – 4castle

有你試圖解決使用引導框架的問題？使用網格，你將能夠根據您想要的尺寸才能將圖像中的行和列。自舉的作品在12網格所以，你需要沿着

<div class = row> 
    <div class = col-md-4> 
    <insert image here or content here> 
    </div> 
    </div>

線，您可能還需要添加到您的圖片的東西：如需要

.center-block { 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
}

基本上你會重複這個過程。用「COL-MD-4」爲4 * 3 = 12每個圖像。它可能需要額外的調整，但引導程序將完成幾乎所有的繁重工作。以下是BootStrap及其文檔的鏈接。祝你好運的朋友。

http://getbootstrap.com/

來源

2016-04-27 03:50:30

感謝您的答覆，我知道是舉一個簡單的解決方案，我想怎麼過，以瞭解如何解決這個問題，而不是使用框架能夠解決我的所有問題，畢竟學習是通向知識 –

我在這種情況下明白了，也許嘗試手動調節通過保證金左或右緣對齊。 –

如果我手動調整的內容，whaching更小的屏幕上的頁面時的中心的內容不再被居中。 –

圖居中抹灰圖像

回答

相關問題