0

CSS

div.browseBuildsArea-pro {
float: left; 
position: relative;
width: 790px; 
height: 90px; 
background-image:url('images/builds/builds-bg-pro.jpg'); 
background-repeat:no-repeat;
}

div.browseBuildsArea-pro img.champion {
float: left;
display: block;
height: 72px;
margin-left: 14px;
margin-top: 7px;
border-radius: 9px;
-moz-border-radius: 9px;
-khtml-border-radius: 9px;
-webkit-border-radius: 9px;
}

div.browseBuildsArea-pro div.build-poster {
float: left;
display: block;
margin-left: 10px;
margin-top: 10px;
}

div.progress-for-build-listing {
float: left;
width: 250px; 
margin-left: 400px;
margin-top: 0px;
}

HTML

<div class="browseBuildsArea-pro">
<img class="champion" src="<%THEME%>images/lol/avatars/2.png">

<div class="build-poster">
    Test Message
</div>

<div class="progress progress-for-build-listing">
    <div class="progress-bar" style="width: 100%;"></div>
</div>
</div>

私が達成しようとしているのは基本的なことです。

「テスト メッセージ」のコンテンツを自動的に div の中央に揃えたい。(文字列の長さに関係なく) また、「進行状況バー」と右側の追加の div も自動的に中央に配置されます。

これが私が探しているもののプレビューです。 http://imgur.com/TAA7t3M (div と div 内のコンテンツの両方が自動的に中央に配置されます。)

いくつかのことを試しましたが、どれもうまくいきませんでした。(例: display: table-cell;) どうすればこれを達成できますか? ちょっとした例を 1 つ紹介します。

4

2 に答える 2

0

垂直方向の配置については、この記事をご覧ください: http://phrogz.net/css/vertical-align/index.html

そして、上記の記事から見たものを利用します: http://jsfiddle.net/tf7Cb/

これは、水平方向のセンタリングが必要な場合に使用します。

div.browseBuildsArea-pro div.build-poster {
   float: left;
   display: block;
   margin-left: 10px;
   margin-top: 10px;
   text-align: center;
}
于 2013-02-01T14:02:34.590 に答える
0

テキストを中央に配置するには、CSS に 2 つのパラメーターが必要です。

display:table-cell;
vertical-align:middle;

また、あなたのdivには高さがありません。それを追加して整列させる必要があります。あなたのコードでは次のようになります：

div.browseBuildsArea-pro div.build-poster {
float: left;
display:table-cell;
vertical-align:middle;
height:72px;
text-align:center; // if you also want it to align in the middle horizontally
margin-left: 10px;
margin-top: 10px;
}
于 2013-02-01T13:53:20.417 に答える