0

基本的に、小さなアイコンとテキストを含むli要素があります。これらの要素を水平方向と垂直方向に中央揃えにしたいと考えています。ただし、私はCSSの経験があまりないため、機能しません。

2 つのスパンと行の高さを使用して、要素を垂直方向に中央揃えすることができました。しかし、スパンに対してテキストの配置が機能せず、フロートの中央が存在しないため、水平方向のセンタリングに失敗しています。

皆さん、何かアイデアはありますか??

ここに私のコード:

HTML:

echo "<li style=\"background-color:#f7f7f7; color:#2EA620;\"><span class=\"image\"><img src=\"Images/List/Teams/" . $temp . ".png\" /></span><span class=\"text\">".$obj_teams->Name."</span></li>";

CSS:

li {
    width:173px;
    height:30px;
    line-height:30px;
    font:"Myriad Pro";
    font-size:14px;
    padding-left:10px;
    padding-right:10px;
    border-bottom:1px solid;
    border-left:1px solid;
    border-right:1px solid;
    border-color:#CCC;
}

.image {
    float:left;
    text
}

.text {
    float:left;
    color:#2EA620;
    line-height:30px;
}

これが現在の様子の画像です。（中央に配置したい要素をマークした場合）

http://i.imgur.com/tI9Vulf.png

4

3 に答える 3

3

text-alignルールを使用できます：

li.center {
  text-align: center;
}

実際の例については、このフィドルをご覧ください。

http://jsfiddle.net/fX9jp/1/

于 2013-01-29T17:41:19.313 に答える
1

あなたの特定の問題は、あなたが画像を浮かせて左にスパンしているが、それらを中央に配置したいということです。両方の左側にあるフロートを削除すると、li要素の中央にtext-align：centerを配置できます。

li {
width:173px;
height:30px;
line-height:30px;
font:"Myriad Pro";
font-size:14px;
padding-left:10px;
padding-right:10px;
border-bottom:1px solid;
border-left:1px solid;
border-right:1px solid;
border-color:#CCC;
text-align:center;
}

.text {
color:#2EA620;
line-height:30px;
}
于 2013-01-29T17:50:03.943 に答える
1

text-align: center;スパンはインライン要素であるため、スパンの親（または祖先）要素に適用してみてください（スパン.textがあなたのスパンであると仮定します）。

または、スパンをブロック要素にして、左右のマージンを に設定してみてくださいauto。

.text {
    display: block;
    margin: 0 auto;
}

span のようなインライン要素はtext-align祖先要素に応答しますが、div のようなブロック要素はマージンの設定に応答しますauto。要素内に含まれるテキストは、その要素に配置されたものに応答するtext-alignことに注意してください (テキストは技術的にはその要素内の「テキスト ノード」であるため)。

于 2013-01-29T17:43:09.433 に答える