0

マージン/パディングを追加せずに、右側の灰色のボックスを中央揃えにしようとしています:

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }  
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; }
h3 span { margin-left: 0.5em; }
a { float: right; text-align: right;  }
a span {  vertical-align: middle; background-color: #ccc; width: 1em; height: 1em; color: #fff; margin-right: 0.5em; display: inline-block; }
#content { height: 16em; }
  </style>
 </head>
 <body>
<div id="frame">
<div id="header">
<h3><span>Heading</span><a href="#"><span></span></a></h3>
</div>
<div id="content">
</div>
</div>
 </body>
</html>

http://jsfiddle.net/hotdiggity/4yGh8/

4

3 に答える 3

1

これにはいくつかの方法がありますが、どれも完璧ではありません。

セレクターを書きやすくするために、マークアップを少し変更しました。

<div id="frame">
<div id="header">
<h3><span>Heading</span><span><a href="#"></a></span></h3>
</div>
<div id="content">
</div>
</div>

CSS テーブル

ラップするコンテンツがある場合、結果はきれいではない可能性があります。

http://jsfiddle.net/4yGh8/4/

#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }  
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }
h3 { margin: 0em; padding: 0em; display: table; width: 100%; }
h3 span { display: table-cell; vertical-align: middle; }
h3 span { padding: 0 0.5em; width: 100% }
h3 span:last-child { width: 1px; line-height: 1; }
a {  background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }

フレックスボックス

http://caniuse.com/#search=flexboxをチェックして、これを機能させるために必要なプレフィックスを確認してください。

http://jsfiddle.net/4yGh8/6/ (プレフィックスは含まれていません)

#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }  
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }

h3 {
    margin: 0em;
    padding: 0em;
    display: flex;
    width: 100%;
    justify-items: space-between;
    align-items: center;
}

h3 span {
    margin: 0 .5em;
}

h3 span:first-child {
    flex: 1 1 auto;
}

a {  background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }

絶対位置

http://jsfiddle.net/4yGh8/7/

#frame { border: 1px solid #999; padding: 0.5em; width: 60%; margin: 0 auto; }  
#header { height: 40px; line-height: 40px; background-color: #eee; position: relative; width: 100%; }

h3 {
    margin: 0em;
    padding: 0em;
    position: relative;
}

h3 span {
    padding: 0 .5em;
}

h3 span:last-child {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -.5em; /* half of the element's height */
}

a {  background-color: #ccc; width: 1em; height: 1em; color: #fff; display: block }
#content { height: 16em; }
于 2013-02-26T14:02:39.940 に答える
0

できることは2つ。

  1. 別のボックスを追加します en limit は、ブロックが真ん中にフロート右になるまで幅に制限されます

  2. マージンとパディングを使用する

于 2013-02-26T13:21:31.993 に答える
0

position:relativeyour に追加して#frameからposition:absolute;top:0;bottom:0; margin:auto;youtに追加するだけです#header。私はあなたのフィドルを編集しました

于 2013-02-26T13:21:39.607 に答える