1

これは私のフィドルです。テキストと時間テキストをName1垂直 方向に中央揃えできません。Name2試してみましdisplay: table-cell; vertical-align: middle;たが、役に立ちませんでした。どこが間違っているのか教えてもらえますか？

html：

<div style="height: 15%;">
    <div class="timeDiv">
        <span class="time">19:00</span>
    </div>

    <div class="titleDiv">
            <img src="" alt="test1 img">                        
        <span class="title">Name 1</span>
    </div>            

    <div class="titleDiv">                                        
        <img src="" alt="test2 img">
        <span class="title">Name2</span>
    </div>
</div>

css：

img{
    height: 80%; 
    float:left; 
    margin-left: 7%;
    margin-right: 1%;   
}

.timeDiv{
    float: left; 
    width:10%;
}

.titleDiv{
    float: left; 
    width: 45%;            
}

.title{
    font-size: 2em;
    float: left;
}

.time{
    font-size: 1.5em;
    float: right;
}
4

2 に答える 2

3

ここを見てください: )http://phrogz.net/css/vertical-align/index.html

ブロックレベルの要素に使用しない理由を説明しvertical-align: middle、必要なことを実行する方法を示します（ページの下部近く）。

ここでの問題は3つあります。

HTMLレイアウトは、従来、垂直方向の動作を指定するようには設計されていませんでした。その性質上、幅方向にスケーリングされ、コンテンツは使用可能な幅に基づいて適切な高さに流れます。

従来、水平方向のサイズ設定とレイアウトは簡単です。垂直方向のサイズとレイアウトはそれから導き出されました。vertical-align：middleが目的の動作を行わない理由は、作成者が本来の動作を理解していないためですが…</ p>

…これは、CSS仕様が（私の意見では）これを実際に台無しにしたためです。vertical-alignは、使用場所に応じて2つの完全に異なる動作を指定するために使用されます。

私は方法1があなたが望むことをするだろうと信じています。

于 2012-09-20T11:27:47.357 に答える
1

line-height特定のコンテナにsを適用してみることができます。デフォルトの行の高さが1emであるため、これは冗長ですが、 imgが取得さ2 emれ、時間が取得1.33 emされ、タイトルが取得されます。1 em次に例を示します。

例

GL :)

于 2012-09-20T11:37:24.163 に答える