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.

Answer 2

使用

#hossimage1 {
width:600px;
height:399px;
margin-left:50px;
position:relative;
top:t px;
left:y px;
align:center; 
}

在每个hossimage1，hossimage2，hossimage3 id中。

Answer 3

如果使用此模式

<div class="parent">
    <img class="child">
    ...

使用以下CSS

.parent {
  display: flex; /* Here is the trick */
  height: someContainerHeight;
  width: someContainerWidth;
}

.child {
  width: someElementHeight;
  height: someElementWidth; 
  margin: auto;  /* Here is the trick */
}

您将自动将图像完美地居中。

Answer 4

您只需将img设置为display:block;，然后margin-left和margin-right auto：

img { display:block; margin:0 auto; }

使用您的代码查看示例：

http://jsfiddle.net/3Lh3U/

将图像置于容器内

4 个答案: