0

ここで助けが必要です。私は何時間もそれを正しくしようとしてきましたが、効率的な解決策を見つけることができません.

<div id="Header">
<img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'
/>
 <h1>siajdasdasdasd</h1>

<p>sdhaosidasdas</p>

私がやろうとしていることの例

画像を左に配置し、タイトルを中央に配置したリキッド ヘッダーを作成したいのですが、どちらも高さの中央に配置する必要があり、img /div の高さを上げても問題ありません。

4

3 に答える 3

1

さらにいくつかのdivを追加する必要がありましたが、機能します。http://jsfiddle.net/74Rnq/23/

HTML：

<div id="Header">
    <div class="wrap">
        <img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/>
        <div class="text">
            <h1>siajdasdasdasd</h1>
            <p>sdhaosidasdas</p>
        </div>
    </div>
</div>

CSS：

#Header {
    position: relative;
    height: 200px;
    padding: 15px;
    background: #DBE6EC;
    border-bottom: 1px solid #595959;
    overflow: auto;
}
#Header h1, p {
    text-align: center;
    letter-spacing: -1px;
    text-align: center;
    font-size: 2em;
    color: #1F1F1F;
}
#Header p {
    font-size: 1em;
}
#Header img {
    float: left;
    max-height:100px;
}

#Header .wrap {
    display: block;
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -50px; /* Half of wrap div height */
}

#Header .wrap .text {
    position: absolute;
    top: 50%;
    margin-top: -27.5px; /* Half of text div height */
    width: 100%;
}
于 2013-02-02T19:52:18.403 に答える
0

最新のブラウザーでは、display:table、table-row table cell を使用して実行できます。

html を次のように変更します。

<div id="Header" class="table">
    <div class="row">
        <div class="cell">
            <img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg'/>
        </div>
        <div class="cell main">
             <h1>siajdasdasdasd</h1>
             <p>sdhaosidasdas</p>
        </div>
    </div>
</div>

#Header {
    background: #DBE6EC;
    border-bottom: 1px solid #595959;
    position:relative;
    padding:15px;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

.table {
    display:table;
    width:100%;
}

.row {
    display:table-row;
}

.cell {
    display:table-cell;
    vertical-align:middle;
}

.cell.main {
    width:100%;
}

更新されたフィドルはこちらです。このソリューションは ie7 では機能しません。ie7 をサポートする必要がある場合は、vertical align middleの古い回避策があります。

于 2013-02-02T20:09:52.340 に答える
0

コンテナ divdisplay: table-cellと各子 div を作成しdisplay: table-cellます。次に、子 divvertical-align: middleを指定すると、常に垂直方向の中央に配置されます。

HTML:

<div id="Header">
    <div id="image">
        <img src='http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg' />
    </div>
    <div id="title">
       <h1>siajdasdasdasd</h1>
       <p>sdhaosidasdas</p>
    </div>
</div>

およびCSS:

#Header {
    padding: 15px;
    background: #DBE6EC;
    border-bottom: 1px solid #595959;
    display: table;
}
#Header h1, p {
    text-align: center;
    letter-spacing: -1px;
    font-size: 2em;
    color: #1F1F1F;
}
#Header p {
    font-size: 1em;
}
#Header img {
    float: left;
    max-height:100px;
}
#title{
    display: table-cell;
    vertical-align: middle;    
    width: 100%;
}
#image{
    display: table-cell;
    vertical-align: middle;
}

そしてここにjsFiddleがあります。

于 2013-02-02T20:13:56.483 に答える