css - 在容器内居中图像

Question

我正在创建一个包含多个页面的网站，每个页面上都有不同的图像 - 大小不一。我使用下面的 css 将整个页面居中:

.container {
width: 960px;
margin: auto;
}

我不确定如何在每个页面上将这些图像居中。我目前正在使用左边距并通过眼睛进行操作，但这似乎不正确，尤其是因为每个图像都需要不同的边距。我缺少什么吗？有更好的方法吗？

例如 HTML

<div id="image_description_multipleimages">

<section id="image_container_multipleimages">

<img src="main_content_images/1.HOSS.png" id="hossimage1">
<img src="main_content_images/2.HOSS.png" id="hossimage2"> 
<img src="main_content_images/3.HOSS.jpeg" id="hossimage3">                 
</section>

<section id="description">

<h2> Hoss Intropia</h2>
</section>

</div>

CSS

#hossimage1 {
width:600px;
height:399px;
margin-left:50px;}

#hossimage2, {
width:600px;
height:908px;
margin-left:136px;}

#hossimage3 {
width:600px;
height:1025px;
margin-left:50px;}

#image_description_multipleimages {
clear:both;
width: 600px;
height: 2500px;
margin-left:130px;
margin-top:60px;
}

#image_container_multipleimages img{
margin-top:15px;
float: left;
clear:both;}

Answer 1

您可以在其容器 div 上使用 text-align: center;。这将使它们像文本一样对齐到中心。

Fiddle.