10

我有简单的 div

<div class="ui-bar-a ui-corner-top">
    first_test | Status: <img src="templates/style/images/reload.gif" />
</div>
<div class="ui-bar-a">
    sms1 | Status: <img src="templates/style/images/reload.gif" />
</div>
<div class="ui-bar-a ui-corner-bottom">
    sms2 | Status: <img src="templates/style/images/reload.gif" />
</div>

看起来像：

重新加载

我需要它：

重新加载2

我尝试设置margin:auto align="middle"，但没有帮助

4

6 回答 6

9

试着把

.ui-bar-a img{
    vertical-align: middle;
}
于 2012-09-14T12:02:49.083 回答
4

就放

vertical-align:middle;

图像的 css。没有其他的。你会得到你的输出。

于 2012-09-14T12:05:08.900 回答
2

你可以使用这个 CSS：

.ui-bar-a img, .ui-bar-a span{
    display:inline-block;
    vertical-align:top;
}
    .ui-bar-a img{
    margin-top:xxx; // as you requirment  
}

这个HTML：

<div class="ui-bar-a">
    <span>Some text here </span>
    <img src="xxx.jpg"> 
</div>
于 2012-09-14T11:58:56.873 回答
0

这是一个如何垂直对齐 DIV 的示例

例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>
</body>
</html>

来源：http ://www.jakpsatweb.cz/css/css-vertical-center-solution.html

于 2012-09-14T12:08:06.590 回答
0

您可以使用：用于制造的浮动，

<div class="ui-bar-a ui-corner-top"> 
<span>first_test</span> <span>|</span> <span>Status:<span> <img src="templates/style/images/reload.gif" />

.ui-corner-top{ 溢出：隐藏填充：5px 0; }

.ui-corner-top span{ 浮动：左；显示：块；填充：0 2px；

}

于 2012-09-14T12:11:00.190 回答
0

使用此代码，下面是结果以及附件

在此处输入图像描述 

<div class="ui-bar-a">
sms1 | Status: <img src="status.png" style= "vertical-align:middle;"  />
</div>
 <div class="ui-bar-a ui-corner-bottom">
sms2 | Status: <img style= "vertical-align:middle;" src="status.png" />
</div>
于 2012-09-14T12:11:54.053 回答