Question

我有以下fiddle

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

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

问题是因为我正在使用“display：inline-block;”还是有其他问题？

<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;
}

更新：更正了小提琴链接 - 抱歉

Answer 1

这是您正在寻找的http://jsfiddle.net/BcPjz/4/

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

或http://jsfiddle.net/GYkBC/1/

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

如何在一个封闭的div内部生成一个gif和两行文本？

1 个答案: