简单的方法垂直对齐嵌套的div？ [英] Simple way to vertically align a nested div?
本文介绍了简单的方法垂直对齐嵌套的div？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在父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>此文字< / div>
< div class =innerText>应该居中< / div>
< / div>
< / div>
< / body>
< / html>
使用 display：table- c> c> c> c>
.inner2 {
height：80px;
padding-left：10px;
vertical-align：mid;
display：table-cell;
}
I am trying to vertically align some rows of text within a parent div. Below is a simple example that should explain exactly what I want. It seems so simple, but after hours of searching I still can't find a way to do it! Thanks for any help you can provide.
<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>
解决方案 Use display:table-cell; instead of float:left; in your inner2 class.
.inner2 {
height:80px;
padding-left:10px;
vertical-align:middle;
display:table-cell;
}
这篇关于简单的方法垂直对齐嵌套的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
