0

我正在尝试组合一个如下所示的导航栏：

http://s7.postimage.org/jhfi6rbp7/gallerybar.jpg

所有正方形都是单独的图像，我想将它们对齐到包含橙色条 .jpg 的 div 标签的左侧。

这是我到目前为止所拥有的：

<div id="rule">
    <img src="../images/rule2.jpg" width="750" height="1" >
    <div id="   gallery">
        <img src="../images/portfolio/gallery_bplogo_active.jpg" alt="Logo Design"        width="112" height="112"/>
        <img src="../images/portfolio/gallery_bpprint.jpg" width="112" height="112" alt="Magazine and Newspaper Ads" />
        <img src="../images/portfolio/gallery_bpradio.jpg" width="112" height="112" alt="Radio Spot" />
        <img src="../images/portfolio/gallery_bptelevision.jpg" width="112" height="112" alt="TV Spot" />
        <img src="../images/portfolio/gallery_bpvehiclewrap.jpg" width="112" height="112" />
    </div>
</div>

#rule {
    border:0;
    text-align: center;
}

#gallery {
    height: 115px;
    margin: 20px;
    position: absolute;
    border: 20 px;
    border-color:#FFF;
}

我不知道如何将图像垂直居中放在栏上——他们坚持要在栏下浮动。

4

3 回答 3

0

试试这个：

#gallery img {float: left; margin-right: 10px;}
于 2013-02-18T21:52:20.657 回答
0

您的图像需要在 img 标签内对齐。

img {
  vertical-align:middle;
}
于 2013-02-18T22:00:49.590 回答
0

尝试以下解决方案http://jsfiddle.net/chrisdanek/CN3Tb/ 

#gallery {
    padding: 0 20px;
    position: relative;
}
#gallery img { 
    position: relative; 
    background: #fff;
}

#gallery:before { 
    position: absolute;
    content: "";
    border: 1px solid orange;
    top: 50%;
    left: 0;
    right: 0;
}

<div id="gallery">
    <img src="image.jpg" width="112" height="112">
    <img src="image.jpg" width="112" height="112">
    <img src="image.jpg" width="112" height="112">
    <img src="image.jpg" width="112" height="112">
</div>

我删除了不必要的标记并简化了您的 CSS。

于 2013-02-18T22:57:47.567 回答