Question

我正在尝试垂直对齐父div中的某些文本行。下面是一个简单的例子，应该准确解释我想要的东西。看起来很简单，但经过几个小时的搜索，我仍然无法找到办法！感谢您提供的任何帮助。

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

Answer 1

在display:table-cell;课程中使用float:left;代替inner2。

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

Working jsFiddle here.

垂直对齐嵌套div的简单方法？

1 个答案: