3

ロゴを水平方向の中央に配置するのに助けが必要です。また、リンクの上部に対して垂直方向に中央揃えにする必要がありますdiv。誰かが私を助けることができますか？

ロゴを次のようにしたいと考えています。 ここに画像の説明を入力

以下は私のHTMLとCSSです：

HTML - http://codebin.org/view/199faa14

<div id="container">

      <div id="logo">
      <img src="images/images/logo.gif" />
      </div>

      <div id="navigation">
      navigation
      </div>

      <div id="header">
      </div>

      <div id="line">
      </div>

      <div id="content">
      content
      </div>

    </div>

CSS - http://codebin.org/view/dda88d94

body {
background: url(../images/images/bg_page.gif) center center;
}

#container {
width: 940px;
margin: 0 auto;
}

    #header {
    height: 281px;
    background: url(../images/home/header.gif) top center;
    position: relative;
    }

    #logo {
    position: absolute;
    z-index: 2;
    top: 0px
    height: 214px;
    margin: 10px auto 0 auto;
    }

    #navigation {
    position: relative;
    height: 40px;
    background: #fff;
    margin-top: 100px
    }

    #content {
    height: 541px;
    background: url(../images/home/bg_body.png) top center;
    position: relative;
    }

    #line {
    height: 4px;
    background: url(../images/home/line.gif) top center;
    position: relative;
    }
4

4 に答える 4

4

JavaScriptを使用する前に、このようなことを試してください!

.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%; 
margin-left: -150px;
margin-top: -150px;
}

またはこれ！

.image_container {
   width: 300px;
   height: 300px;
   background: #eee;
   text-align: center;
   line-height: 300px;
 }

.image_container img {
   vertical-align: middle;
 }
于 2013-06-02T16:39:43.140 に答える
0

これは次の方法で実現できます。

  • 表示:インラインブロック;
  • 行の高さ;
  • 負のマージン
  • text-align:justify (5 つのアイテム、4 つのリンク、中央に 1 つの画像があります)
  • ：後

他の誰かのために同様のコンテキストで作成されたデモ:
http://dabblet.com/gist/5375725

于 2013-06-02T17:36:54.633 に答える
0

vertical-align: middle; を使用しているときに、いくつかの問題に直面する人もいます。スタイル属性。CSS はプローバー方式で記述する必要があります。手っ取り早く直したい人向け。

.logo { left:0; top:0; height:100%; width:100px; }

<div class="logo" style="background:url('/assets/images/site-logo.png') center center no-repeat;">
  <img src="/site/logo.png" style="display:none;" />
</div>

*コンテナにposition:relative;があることを確認してください。css 属性。

Retina の取り扱いが簡単で、あらゆる種類の CSS マークアップと互換性があります。この単純なテクニックが人々の時間を節約できることを願っています:)

于 2016-01-11T20:05:53.687 に答える