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

.ui-corner-top span {float：left; 表示ブロック; パディング：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 に答える