web-dev-qa-db-ja.com

インライン要素を垂直方向に配置する方法

テキストを垂直に揃えるために間にテキストがあるこのアンカータグがあります。私はこのcss属性vertical-align：middleを使用しています。何も起こりません。

cssinlineanchorvertical-alignment
14
dave

inline-blockにして、line-heightにすることができます。

a {
    line-height: 50px;
    display: inline-block;
}

実例のあるJSFiddle： http://jsfiddle.net/KgqJS/

10
Bazzz

vertical-alignはdisplay: table-cellを持つ要素でのみ機能し、そのプロパティ値は<IE8ではサポートされていません。

既知のテキスト

テキストが中央に配置されることがわかっている場合、それはかなり簡単です。 2つのオプションがあります。

<style type="text/css">
    #container {
        padding: 10px 0;
    }
</style>
<div id="container">
    Example of some lovely<br />
    multiline text.
</div>

CSSのパディングを使用して、上下にパディングを追加し、テキストを中央に表示することができます。これは、複数行のテキストに役立ちます。

<style type="text/css">
    #container {
        height: 100px;
        line-height: 100px;
    }
</style>
<div id="container">
    Example
</div>

Line-heightプロパティを利用して、テキストを垂直方向の中央に配置できます。これは、1行のテキストでのみ機能します。 1つ以上ある場合はどうなるかを推測できます。

動的な複数行のテキスト

ここで物事がややトリッキーになり始め、テーブルを求めて泣くかもしれません。

<style type="text/css">
    #container {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div id="container">
    <?php echo $content; ?>
</div>

<IE8の回避策 。

ソース 。

5
alex
<div><p>test test test test<p></div>

div{
    border:1px solid red;
    width:400px;
    height:400px;
    position:relative;
}


p{
    height:30px;
    position:absolute;
    top:50%;
    margin-top:-15px; /* negative half of height*/
}

http://jsfiddle.net/Z2ssq/1/ で作業例を確認してください

1
Hussein