2

私はこのHTMLコードを持っています:

<div class="news_item">    
    <div class="featured_leftpart">
        <img src="" width="48" height="48" />
    </div>
    <div class="featured_rightpart">
        <div class="news_content">
            <h2 class="entry-title"><a href="" >TEXT </a></h2>
        </div>
    </div>
</div>

このCSSを使用して：

.news_item
{
    width:300px;
    position:relative;
    padding:10px;
    height:100px;
    margin:10px;
    border:1px solid #e8e8e8;
}

div.featured_leftpart
{
    position:relative;
    float:left;
    width:64px;
    height:100%;
}

div.featured_leftpart img{
    position:absolute;
    background-color:#ff00ff;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

div.featured_rightpart
{
    background-color:#ff0000;    
    float:left;
    width:180px;
    padding-left:10px;
    height:100%;
}

.news_content
{
    background-color:#00ff00;
    position:relative;
}

.news_content h2
{
    vertical-align:middle;
}

私がやろうとしているのは、h2タグを垂直方向に揃えることです。このタグには投稿のタイトルが含まれるため、1 行になることもあれば、複数行になることもあります。また、<div class="news_content">それを機能させるための私の試みです。これなしで解決策があればdiv、簡単に削除できます。

上記のコードへのjsFiddleリンクは次のとおりです。

4

1 に答える 1

7

コメントからの拡張:

余分な を追加する必要はありません.news_content。ブラウザーに行の高さと機能を伝えるだけですvertical-align。

http://jsfiddle.net/cJaSL/17/

<div class="featured_rightpart">
    <h2 class="entry-title"><a href="" >TEXT </a></h2>
</div>

div.featured_rightpart
{
    line-height:100px; /* calculated from .news_item */
}
.featured_rightpart h2
{
    vertical-align:middle;
    margin-top:0px; /* need this to clear the default margin */
    margin-bottom:0px;
}

ただし、この解決策は、タイトルが 1 行しかない場合にのみ機能することに注意してください。

編集：

複数行が避けられない場合、ラッパーも避けられないようです:

http://jsfiddle.net/cJaSL/18/

<div class="featured_rightpart">
    <div class="title_wrapper">
        <h2 class="entry-title"><a href="" >TEXT<br />multi<br />line </a></h2>
    </div>
</div>

div.title_wrapper {
    display:inline-block;
    vertical-align:middle;
    line-height:1.25em; /* can adjust to look nice */
}
于 2013-05-03T10:52:09.833 に答える