3

左右両側に境界線があるセクション タイトルがあります。理想的には、これらを縦に並べたいと思います。ただし、vertical-align: middle;機能していません。その理由はよくわかりません。アイデア？

CSS

#save-the-date {
    margin: 0 auto;
    width: 960px;
}

#save-the-date #title {
    vertical-align: middle;
}

#save-the-date #title h2 {
    font-size: 165%;
    margin: 0 auto;
    width: 150px;
}

#save-the-date #title .left-border {
    float: left;
    background:url('img/border.png') repeat-x -10px 0;
    width:340px;
    height:3px;
}

#save-the-date #title .right-border {
    float: right;
    background:url('img/border.png') repeat-x -10px 0;
    width:340px;
    height:3px;
}

HTML

<div id="save-the-date">
    <div id="title">
        <div class="left-border"></div><!-- end border -->
        <h2>Save The Date</h2>
        <div class="right-border"></div><!-- end border -->
    </div><!-- end title -->
</div><!-- end save-the-date -->

ここに画像の説明を入力

4

4 に答える 4

5

display: table-cellコンテナと同様にセットしvertical-align: middleます。これにより、CSS はコンテナーをテーブル セルとして扱い、垂直方向の配置を指定できるようになります。

于 2012-12-20T19:30:32.283 に答える
1

これは単なる 1 行なので、line-height を要素の高さに設定するだけです。JSFiddleで見る

HTML

​&lt;p>hello</p>​

CSS

p {
  line-height: 50px;
  height: 50px;
  background-color: #eee;
}​
于 2012-12-20T19:33:17.067 に答える
0

私の場合、なぜそれが機能したのかわかりません...しかし、次のようにすることで機能することがわかりました：

div {padding-top: 0%;}
于 2013-07-10T09:57:15.283 に答える
0

div divの表示はブロックであるため、表示を変更し<span> たり、表示を変更したりできます。

div
{display: inline-block}

また

div {display: table-cell;}

于 2012-12-20T19:34:27.267 に答える