0

http://tinkerbin.com/ojXJuQfl

別のユーザーからの指示を使用してテキストを垂直方向に中央揃えにすることができましたが、全体を垂直方向に中央揃えにすることができません。テキストを独自のdivに入れると、それができると思いましたが、そうではありませんでした。矢印の横にある段落を中央に配置するにはどうすればよいですか？

CSSの垂直方向の配置は非常に混乱します...

CSS

#arrow {
       width:33px;
       height:25px;
       background-image:url('http://i.imgur.com/26tbf.png');
       margin-left:55px;
       background-position:0 50%;
       float:left;
       height:100%;
       background-repeat:no-repeat;
 } 

#bulletwrap {
       border:1px solid black;
       width:325px;
       height:75px;
 } 

#text {
      background-position:0 50%;
      line-height:75px;    
 }

HTML

<div id="bulletwrap"><div id="arrow"></div><div id="text">This is some longer text that needs to be centered next to the arrow grouped together</div></div>
4

4 に答える 4

2

display: table-cell and vertical-align: middle; height: whatever;これが私がテキストdivとdisplay: table箇条書きで使用した私のバージョンですdiv

于 2012-08-03T17:39:57.710 に答える
2

何かを垂直方向にセンタリングするのはかなり難しい場合があります。私はあなたの解決策に対する代替案を持っています。これは少しハッキーな解決策ですが、私が知る限り、これが最良で最も効果的です。

#bulletwrap div（またはその他のコンテナタイプの要素）をテーブルとして動作させ、＃text（段落またはdiv、関係ありません）をテーブルセルとして動作させる必要があります。vertical-align: middle;これにより、＃text要素を垂直方向に中央揃えで使用できるようになります。

これは重要なcssです：

#bulletwrap {
  border:1px solid black;
  width:325px;
  height:75px;
  display: table; /*set your container to behave as table*/
} 

#text {
  display: table-cell; /*set your text to behave as table cell*/
  vertical-align: middle; /*... and vertically align it*/
}

ここで動作していますhttp://tinkerbin.com/jSocLUGX

それが十分に明確だったことを願っています。他にご不明な点がある場合や、ご質問に対する回答が少ないと思われる場合は、お気軽にお問い合わせください。

于 2012-08-03T17:40:35.143 に答える
0

矢印が中になければならない理由はありdivますか？通常、画像を垂直方向に揃える最も簡単な方法は、画像を背景として使用することです。

<div id="bulletwrap">
  <div id="text">
    This is some longer text that needs to be centered next to the arrow grouped together and what happens if there is even more text then that is not going to work out so well
  </div>
</div>

とCSS

#bulletwrap {
       border:1px solid black;
       width:325px;
       background:url('http://i.imgur.com/26tbf.png') no-repeat left center;
       padding: 10px 0 10px 35px
 }

注-テキストを中央に配置するために、上下のパディングを同じにしました。実際には、コンテナにパディングを適用する必要があります。これにより、ボックスをテキストとともに拡張することもできますが、その動作は望ましくない場合があります。

于 2012-08-03T17:39:35.957 に答える
0

line-height：75px; 犯人です。行の高さは、テキストの「ブロック」全体ではなく、折り返されたテキストの各行に適用されます。おそらく、radixhoundのソリューションまたはマージン/パディングアプローチを使用するのが最善でしょう。

于 2012-08-03T17:40:12.617 に答える