1

これはどこかで答えられるべきだと思います（そしておそらくそうです）が、そうではないか、正しい方法を探していないか、または有効な答えが見つからないため、厳重に保護された国家機密です。具体的には、div の左側にある画像に対応する答えが見つかりません。

私が影響を与えようとしているのは、テキストが画面全体に対して水平方向に中央に配置され、「ヘッダー」div内で垂直方向に中央に配置されることです。ホームアンカーとして使用しているため、ロゴを背景として使用したくありません。「display: table-cell」と「vertical-align: middle」を使用して悲惨な結果を出そうとしました。アドバイス/ヘルプ/リンクをいただければ幸いです。

CSS:

#header{
    width: 85%;
    min-width: 500px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background-color: #fff;
    border-bottom-width: 10px;
    border-bottom-style: double;
    border-bottom-color: #000;
}

#title{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    display: table-cell;
    vertical-align: middle;
}

#logo{
    float: left;
    padding-right: 1em;
    width: 150px;
}

HTML:

<div id="header">

      <a href="."><img id="logo" src="../images/logo.jpg" alt="Widget News" /></a>
    <span id="title"><h1>Site Title</h1></span>
      </div>

また、私は CSS の使用にまったく慣れていません (xhtml/html5 ではまったく役に立ちません)。CSS/PHP/HTML/JScript に慣れるための手段として現在のプロジェクトに取り組んでいますが、これまでのところ、問題を抱えているのは CSS/HTML だけです。優れた初心者向けのガイドへのポインタはありますが、修復/「ダミー用」ではありません。ガイドも高く評価されます。

4

1 に答える 1

0

ロゴを絶対位置に配置することをお勧めします。これにより、(背景画像のように) html 要素の流れから外れ、クリック可能のままになります。

#logo {
position: absolute;
top: 5px;
left: 10px;
width: 150px;
}

これにより、タイトルを中央に配置しやすくなります。コードにいくつかの調整を加えた完全な例を次に示します。

http://jsfiddle.net/gqvUv/

あなたの "text-align: center;" すべてを水平方向に中央に配置し、h1 の行の高さを調整すると、タイトルが 1 行だけである限り、垂直方向に中央に配置されます。

相対的な位置付けと絶対的な位置付けで混乱するのは簡単ですが、このチュートリアルで明確になります: http://www.barelyfitz.com/screencast/html-training/css/positioning/

最後に、これは CSS を中心に据えることに関する私の頼りになる記事です: http://designshack.net/articles/css/how-to-center-anything-with-css/

于 2013-03-05T05:44:03.820 に答える