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 回答