Question

人。我一直在建立一个网站，当我在页脚中添加一些徽标（如合作伙伴）时，我最终遇到了麻烦。我创建了一个带有3个div的div：每个div有一个文本和2个徽标，但我找不到垂直居中这些徽标的方法。有一部分HTML：

<div id="footer">
<div class="footer">
<span style="font-weight: bold;">Realização:</span><br>
<img src="./images/logoufes.png" style="height:65px" class="logo">
<img src="./images/logopet.png" style="height:45px" class="logo">
</div>
<div class="footer">
Patrocínio:<br>
<img src="./images/logonexa.png" style="height:25px" class="logo">
<img src="./images/logovixteam.png" style="height:25px" class="logo">
</div>
<div class="footer">
Apoio:<br>
<img src="./images/logosuporte.png" style="height:25px" class="logo">
<img src="./images/logografica.png" style="height:35px" class="logo">
</div>
<div style="clear:both"></div>

和CSS：

div#footer{
    background: #005426;
    text-color: #fff;
    display:block;
    padding:5px;

}

.footer{
    width:33%;
    float:left;
    color: #fff;
    font-weight:bold;
    font-size:14px;
    border-top:10px;
    position:relative;
}

.logo{
    padding: 0px 10px 0px 10px;
}

以任何方式垂直居中这些徽标？

Answer 1

这是一个可能适合您的解决方案：

<强> Demo Fiddle

使.footer类显示内联块允许您垂直对齐图像元素。

CSS：

.footer{
    //float:left;

    width:32%;
    display: inline-block;
}

.logo{
    vertical-align: middle;
}

Answer 2

这个答案应该正是你要找的......

I need to center multiple images that each have their own div tag, within the container

并且非常可重复使用....我可能会添加;）

http://jsfiddle.net/6ARJX/134/

#container {
    width: 100%;
    text-align: center;
}
.innerwrap {display:inline-block;}
.innerwrap div{
   padding:5px;
   margin:5px;
   float: left;
}

页脚上的垂直中心徽标

2 个答案: