logo标签列表

如何将行内图片与文本对齐？

imagecss
14

我有简单的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>

看起来是这样的：

reload

我需要它像这样：

reload2

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

请问您能否详细说明您想要实现的目标，并附上您的CSS代码？ - Billy Moat
6个回答
13
尝试放置
.ui-bar-a img{
    vertical-align: middle;
}
4

只需放置

vertical-align:middle;

只需要 CSS 调整图片样式，不需要其它。你将得到你想要的输出。

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>
1
请使用此代码，以下是结果以及附件。

enter image description here 

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

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{ overflow:hidden; padding:5px 0; }

.ui-corner-top span{ float:left; display:block; padding:0 2px;

}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接