我有簡單的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>
它看起來像：
我需要它想：
我試圖設置margin:autoalign="middle"，但它確實不幫
嘗試把
.ui-bar-a img{
vertical-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>
只是把
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>
來源：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
您可以使用：floting製作，
<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;
}
使用此代碼，下面是結果，以及附着
<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>
能否請您介紹一些關於你真正想實現什麼，還包括你的CSS代碼？ –