图像对齐

我对此很新，所以这可能看起来像是一个非常简单的问题。图像对齐

我已经开始设计自己的页面，下面的代码是我到目前为止的地方。

它是如何看起来是...

左上角 - 我的标志
右上角 - 导航
左边 - 图像/描述

什么我想做，以及我陷入困境的地方，都会让描述在每张图片下完美对齐，并且在页面上移动时也会发生同样的情况。

当前正在发生的事情是，每张图片和下面的描述在页面左侧一直向左对齐。

下面

当前代码：

<body> 
    <div class="container"> 
    <a href="#"><img src="#" alt="Title" width="300" height="100" /></a> 
    <div id="navbar"> 
     <ul> 
     <li><a href="#">GALLERY</a></li> 
     <li><a href="#">ABOUT</a></li> 
     <li><a href="#">BLOG</a></li> 
     <li><a href="#">CONTACT</a></li> 
     </ul> 
    </div> 
    <div id="images"> 
     <img src="#" width="300" height="199" alt="name"></div> 
     <div id="descriptions">City</div> 
     <div id="images"> 
     <img src="#" width="300" height="199" alt="name"></div> 
     <div id="descriptions">Model</div> 
     </div> 
    </div> 
</body>

来源

2012-12-19 user1912669

尝试使用表... –

@ chinna_82它不是表格数据。仅为表格数据使用表格。有许多其他方式可以在没有表格的情况下做到这一点。 –

我会用类似这样的标记：

<figure class="images"> 
    <img src="#" width="300" height="199" alt="City"> 
    <figcaption>City</figcaption> 
</figure> 

<figure class="images"> 
    <img src="#" width="300" height="199" alt="Model"> 
    <figcaption>Model</figcaption> 
</figure> 

<figure class="images"> 
    <img src="#" width="300" height="199" alt="Foo"> 
    <figcaption>Foo</figcaption> 
</figure>

和一些示例CSS：

.images { 
    float: left; 
    width: 300px; 
    min-height: 200px; 
    margin: 0 10px 0 0; 
    background-color: #EEE; /* just to show containers since image scr is blank */ 
} 

.images:last-child { 
    margin-right: 0; 
} 

.images figcaption { 
    text-align: center; 
}

Fiddle

来源

2012-12-19 03:41:46 steveax

太棒了！它工作得很好！非常感谢。我还有其他一些问题：1）如果我想在左侧有4个图片的象限，上面的变化如何，基本上，顶部2张图片和底部2张图片; 2）如果我在左侧有那个象限，并且想要在翻转不同图片的过程中在右侧放置一段，我该怎么办？和3）如何扩展第一个图像和导航栏在其他图像周围的白色背景颜色...我为其余图像创建了一个带有白色背景和灰色背景的容器。 – user1912669

@ user1912669对于第一种情况，您可以删除'：last-child'规则并添加：'.images：nth-child（2）{margin-right：0; }'和一个额外的规则来清除浮动：'.images：nth-child（3）{clear：left; }'。您的其他问题可能最好作为一个新问题处理。为每一个创建一个简明的例子，并创建新的问题。 – steveax

回答

相关问题