1

これが私のhtmlです：

<ul id="sub_nav" class="block_hide trim no_list no_line" style="display: block; left: 524.5px;">
<li><a href="/path1" class="one">1st button</a></li>
<li><a href="/path2" class="one">2nd button</a></li>
<li><a href="/path3" class="one">3rd button</a></li>
</ul>

私が現在持っているものであれば、画像も添付しました。display：table-cell;を追加してみました。垂直整列：中央; アンカータグクラスに追加しましたが、機能しませんでした。次のクラスを使用して、アンカータグの周囲にスパンを追加しようとしました。display：table-cell; 垂直整列：中央; しかし、それも機能しませんでした。どちらの場合も、ボタンの高さは一定ではありませんでした。

テキストを垂直方向に中央揃えにして、ボタンの高さと幅を同じに保つにはどうすればよいですか？

ここに画像の説明を入力してください

クロスブラウザであるため、display：table-cellソリューションを使用することになりました。ボタンの幅を100％ではなくハードコーディングする必要があったため、最初は気に入らなかったのですが、それを超えるとそれは固溶体でした：私のli：

.header #sub_nav li {
    display: table;
    float: left;
    font-size: 11px;
    line-height: 12px;
    margin-bottom: 12px;
    margin-left: 12px;
    width: 86%;
}

私のA：

    .header #sub_nav li a {
    display: table-cell;
    height: 45px;
    vertical-align: middle;
    width: 111px;
}
4

6 に答える 6

6

私はあなたが求めているのと同じようなことをします。親を「display：table」として定義し、要素自体を「vertical-align：middle」と「display：table-cell」で定義するとうまくいきました。

于 2012-12-20T00:45:20.037 に答える
5

li（またはdivなど）内にアイテムが1つしかない場合、最も簡単な方法は、line-heightを要素の高さと同じに設定することです。これにより、垂直方向に配置されます。以下に簡単なフィドルを作成しました。これがお役に立てば幸いです。 http://jsfiddle.net/fCkLJ/

li {
  /* other styling */
  height: 30px;
  line-height: 30px; 
}
于 2012-12-20T00:46:38.977 に答える
1

試す：

li{
padding-top:20%;
padding-bottom:20%;
}

これにより、LIの上下にパディングが発生しますが、1つのLIがラップし、別のLIがラップしない場合、高さは異なります。

http://jsfiddle.net/VMCH6/1/

于 2012-12-20T02:09:24.920 に答える
0

を使用している場合は、要素background-imageに固定幅の高さを設定し、li.a要素にこのハックを使用する必要があります。

li a {
    height: 50px;
    width: 300px;
    margin: auto 0;
    display: block;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
}

これは実際の例です（画像を背景として使用した場合でも）。完全なボタンはクリック可能であり、複数行になる柔軟性があります。

http://jsfiddle.net/GqBAL/494/

注：これは100％クロスブラウザーではありませんが、最善の解決策です。

于 2012-12-20T01:37:47.257 に答える
0

多くの方法があります、ここを見てください

于 2012-12-20T00:43:26.070 に答える
-1

HTML / CSSの知識が十分ではありませんが、大丈夫だと思います。

この回答では、高さを削除してUL/LI自動高さを提供し、アンカータグでは、ボタン<a>を表示するためにパディングを使用しました。bigger-height-centralized

CSS部分は：

<style>
html , body , ul , li 
{
    margin:0;
    padding:0;
}
html , body
{
    width:100%;
    height:100%;
}
ul
{
    width:100%;
    height:auto;    
    background-color:red;
}
li
{
    width:33%;
    height:auto;    
    display:inline-block;
    background-color:green; 
}
a
{
    width:100%;
    height:100%;
    text-align:center;
    display:block;
    padding-top:10%;
    padding-bottom:10%;
}
</style>

HTML部分は：

<body>
<ul>
<li><a href="">tushar</a></li>
<li><a href="">tushar</a></li>
<li><a href="">tushar</a></li>
</ul>
</body>
于 2014-03-05T06:02:22.923 に答える