1

注意が必要なのは、border-top と border-bottom が適用された HTML タイトルがあります。境界線が要素と同じ幅になるように中央揃えできますか? 今、私は悲惨な幅を使用する必要がありますが、これはまったく良い解決策ではありません.

デモについては、こちらをご覧ください: http://codepen.io/anon/pen/KIJAh

HTML

<div>
<h3 class="removeMe">All your base</h3>
</div>

CSS

div {
 padding-top: 30px;
 height: 100px;
 width: 300px;
 margin: 0 auto;  
 background-color: Moccasin;
}

h3 {
  text-align: center;
  display: block;
  border-top: 1px solid black;
  border-bottom: 1px solid black; 
  margin: 0 auto;
}

.removeMe {
 width:160px;
}
4

6 に答える 6

3

私が考えることができる2つの主なオプションがあります：

1) h3 をdisplay: inlineAND に設定し、親要素を設定します。text-align: center

于 2013-04-23T22:50:46.127 に答える
0

display:inline をお勧めしますが、それがレイアウトを壊し、修正したくない場合。テーブルを試してみてください。デモで希望どおりに機能するようです。ただし、まだ実行可能な css であると 100% 確信しているわけではありません。

display: table;
于 2013-04-23T22:51:15.770 に答える