0

divタグのインライン要素を垂直方向に揃えようとしています。これが私のHTMLです：

<div class="foo">
    <div id="bar">
        <a href="#">Link 1</a>
    </div>
</div>

そしてこれが私のCSSです：

.foo{
    width:200px;
    height:60px;
    background-color:red;
}

.foo #bar{
    text-align:center;
    vertical-align:middle;
}

このアンカータグを垂直に配置するにはどうすればよいですか？これを効果的に行うために、HTML / CSSを正しい方法で設定しましたか？インライン要素とブロック要素を垂直方向に整列させるためのベストプラクティスは何ですか？

ありがとう

4

1 に答える 1

1

.cssの最も純粋な方法は、次のdisplayような属性を使用することです。

.foo { display: table; } 
#bar {
    display: table-cell;
    vertical-align: middle;
}

これは、＃barに説明セットの高さがあり、その内容が垂直方向に整列していることを前提としています。

于 2012-12-11T01:01:14.103 に答える