图居中抹灰图像

事先我感谢所有帮助，因为即时通讯新的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更小的屏幕上的页面时的中心的内容不再被居中。 –

图居中抹灰图像

回答

相关问题