1

我有以下小提琴

左边是 32 x 32 的图像，右边是两行文字。有人可以看看这个并告诉我哪里出错了。我需要的只是 gif 的中心和文本与封闭框架的中间对齐。

正如您从小提琴中看到的那样，我尝试了很多不同的边距组合，但似乎没有一个对我有用。

问题是因为我使用的是“显示：内联块；” 还是有其他问题？

<div class="server-info">
   <div style="z-index: 99; width: 32px; height: 32px;
      margin-top: 9px;
      margin-bottom: 9px;
      margin-right: 3px; display: inline-block;" id="load-icon"></div>
   <div style="display: inline-block; margin-top: 5px;
      margin-bottom: 5px; height: 40px;">XXX<br>YYY </div>
</div>

CSS

.server-info {
    border-radius: 0.4em 0.4em 0.4em 0.4em;
    border-top: 0 none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.65);
    color: white;
    display: inline-block;
    margin-left: 0.5em;
    padding: 0 1em;
    vertical-align: top;
    font-size: 1em;
    margin-top: 1.6em;
    padding-left: 1em;
    padding-right: 1em;
    text-align: left;
    text-transform: none;
    background: none repeat scroll 0 0 #000000;
}

#load-icon
{
    background: url("http://www.smilecarwash.com/images/ajax-loader.gif");
    background-repeat: no-repeat;
}

更新：更正了小提琴链接-对此感到抱歉

4

1 回答 1

1

这是你要找的http://jsfiddle.net/BcPjz/4/

要垂直居中对齐，您需要添加display:table-cell和vertical middle到文本 div。

或者这个http://jsfiddle.net/GYkBC/1/

要将文本放在图像下方，请添加display:block到图像 div 或文本 div

于 2012-09-12T07:11:41.377 回答