Image 如何将内联图像与文本对齐？_Image_Css

Image 如何将内联图像与文本对齐？

image css

Image 如何将内联图像与文本对齐？,image,css,Image,Css,我有简单的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-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>


第一次|U测试|状态：
sms1 |状态：
sms2 |状态：

它看起来像：

我需要它，就像：

我试图设置

margin:auto

align=“middle”

，但没有帮助

您可以使用以下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>


这里有一些文字

试着放

.ui-bar-a img{
    vertical-align: middle;
}

放

vertical-align:middle;

图像的css。没有别的了。您将获得您的输出。

这里是一个如何垂直对齐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>


带有CSS的通用垂直中心
.greenBorder{border:1px纯绿色；}/*只需边框即可查看*/
任何文本

任意高度

任何内容，例如从DB生成的内容

一切都垂直居中

来源：

您可以使用：制作牙线

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


第一次|U测试|状态：

.ui角顶部{ 溢出：隐藏填充：5px0； }

.ui角上跨{ 浮动：左；显示：块；填充：0.2px

}

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


sms1 |状态：
sms2 |状态：

能否请您详细解释一下您真正想要实现的目标，并包括css代码？

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