1

親 div 内でいくつかのテキスト行を垂直方向に揃えようとしています。以下は、私が望むものを正確に説明する簡単な例です。とても簡単に思えますが、何時間も検索した後でも、それを行う方法を見つけることができません! ご協力いただきありがとうございます。

JSFiddle

<html>
<header>

<style type="text/css">
.outer
{
}
.inner1
{
    float:left;
    width:80px;
    height:80px;
    background-image:url('http://www.google.com/favicon.ico');
    background-size:cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.inner2
{
    float:left;
    height:80px;
    padding-left:10px;
    vertical-align:middle;
}
.innerText
{
}
</style>

</header>
<body>

<div class="outer">
    <div class="inner1"></div>
    <div class="inner2">
        <div class="innerText">This text</div>
        <div class="innerText">Should be centered</div>
    </div>
</div>

</body>
</html>
4

1 に答える 1

2

display:table-cell;クラスの代わりに使用float:left;しますinner2。

.inner2 { 
   height:80px;
   padding-left:10px;
   vertical-align:middle;
   display:table-cell;
}

ここで jsFiddle を使用します。

于 2013-05-15T21:48:04.333 に答える