1

私はそのようにすることができると考えていました：

 <div style='height:100px;vertical-align:middle;border:1px solid red;'>
    <div style='display:inline-block;'>hi there</div>
    <div style='display:inline-block;'>hi there</div>
  </div>

内部のdivは中央で垂直に整列しますが、何らかの理由でこれが機能しません。このatmを達成する唯一の方法は、これを行うことです( line-height = to height を使用):

 <div style='height:100px;border:1px solid red;line-height:100px;'>
    <div style='display:inline-block;'>hi there</div>
    <div style='display:inline-block;'>hi there</div>
  </div>

これを行う適切な方法は何ですか?

4

2 に答える 2

1

それはそれを行う良い方法です。display: table-cellまたは、親 div に追加することもできます。その場合、vertical-align: middle が機能します -> http://tinkerbin.com/mxle0LH4。残念ながら、幅はこのように切り取られます。最善の方法は、はい、行の高さを使用することです。ただし、子に個別にではなく、親要素に設定します-> http://tinkerbin.com/ssvg8yPX

于 2012-06-11T19:49:36.993 に答える
1

私はこれを使います

.inner { 
    display:        inline-block;
    padding-top:    40px;
    padding-bottom: 40px;
}​
​
​&lt;div style="border:1px solid red;">
    <div class="inner">hi there</div>
    <div class="inner">hi there</div>
</div>
​
于 2012-06-11T19:50:01.237 に答える