2

物事を垂直に並べることは、闇の芸術のように思えます。これは、現在のサイト コード (具体的にはヘッダー) の一部です。このサイトは、フッターがページの下部にドッキングされるように、このようにコーディングされています。

HTML:

<div id="header-wrap" class="full_width">
  <div id="header-container" class="dc1">
    <div id="header" class="thin_width rel">
      <a href="/"><img src="/static/img/header.jpg" id="logo" alt="coming soon" title="coming soon"></a>
      <ul>
        <li><a href="/posts/list/">Link 1</a></li>
        <li><a href="/posts/create/">Link 2</a></li>
        <li><a href="/about">Link 3</a></li>
      </ul>
    </div>
  </div>
</div>

CSS:

#header-wrap { top: 0; left: 0; }
#header-container { height: 60px; border-bottom: 1px solid #E5E5E5; }
#header { margin: 0 auto; }
#header h1 { color: #beffbf; text-align: left; width: 290px; margin: 0; position: absolute; left: 0; top: 20px; }
#header h1 em { color: #90b874; font-size: small; display: block; }
#header ul { margin: 0; padding: 0; list-style: none; position: absolute; top: 35px; right: 0; }
#header ul li { float: left; margin-right: 5px; }
#header ul li a{ color: #90b874; font-weight: bold; font-size: 1.4em; margin-right: 5px; text-decoration: none; }
#header ul li a:hover { color: #beffbf;  }
.dc1 { background-color: #FFFFFF; }
.rel { position: relative; }
.full_width { width: 100%; }
.thin_width { width: 450px; }​

JSFiddle の例を次に示します。

右側のリンクとロゴを垂直方向に揃えるにはどうすればよいですか?
ロゴやリンクの高さを更新すると面倒になるので、固定パディングを使用せずにこれを試してみたいと思います。

では、この状況で垂直方向に整列する正しい方法は何ですか?

4

4 に答える 4

1

display:table-cellこれにはうまく機能します

#header-wrap { top: 0; left: 0; }
#header-container { height: 60px; border-bottom: 1px solid #E5E5E5; display:table-cell; vertical-align:middle; }
#header { margin:0 auto; overflow:auto;}

デモをチェックhttp://jsfiddle.net/AHsBN/2/

于 2012-10-09T12:24:59.607 に答える
0

あなたがする必要があるのは、element.styleを設定することだけです

#header ul { top:0;}と #header{ position: relative;}

于 2012-10-09T12:17:30.397 に答える
0

これが私の解決策です。配置、高さなどは必要ありません。上、中、下、またはベースラインなど、必要に応じて垂直方向の位置合わせを調整するだけです（#header-containerより簡単に説明するために、高さ：300pxを使用しましたvertical-align: middle;

#header > a { background: red; }
ul { background: green; }
#header-container { background: blue; height: 300px; }

#header > a, ul { display: block; }
li { display: inline-block; }
#header > a { float: left; }
ul { float: right; font-size: 200%; }
#header-container { display: table; width: 100%; }
#header { display: table-cell; vertical-align: middle; }

また、CSS テーブル内のフロートをクリアする必要もありません。

于 2012-10-09T12:46:54.823 に答える
0

HTML

<div id="header">
    <a href="./" class="logo"><img src="http://www.google.co.in/images/srpr/logo3w.png" alt=""></a>
    <ul>
        <li><a href="/posts/list/">Link 1</a></li>
        <li><a href="/posts/create/">Link 2</a></li>
        <li><a href="/about">Link 3</a></li>
    </ul>
</div>

CSS

#header { position: relative; background: #ddd; }
#header a.logo {display: inline-block; vertical-align: middle; *display: inline; zoom: 1;}
#header ul { display: inline-block; vertical-align: middle; *display: inline; zoom: 1; position: absolute; right: 0px; top: 50%; height: 20px;}
#header ul li { display: inline; position: relative; top: -50%;  }

Example: http://jsfiddle.net/gZceQ/4/

Code above should work in all browsers :)

于 2012-10-09T13:18:05.577 に答える