甚至不确定这是否可能，但我想我会问。我搜索并尝试了许多“解决方案”，但没有找到我想要的。
容器宽 940 x 高 100。我想在它的右侧包含一个带有多行文本的图像。这两个作为一个整体应该在 940x100 中水平和垂直居中。我不会为图像或文本设置宽度，因为这会改变 - 特别是因为我在 slider 中使用它。
虽然我可以在内部容器上使用顶部边距/填充来“模仿”它，但我希望有一些确定的东西，而不是对边距/填充的猜测。
我将它与 flexslider 一起使用，所以格式如下。
<div id="awards">
<div class="flexslider">
<ul class="slides">
<li>
img - multiple lines of text
</li>
</ul>
</div>
</div>
#awards .flexslider{
height:100px;
text-align:center;
width:940px;
margin:0 auto;
border:1px #dedede solid;
background:#f1f1f1;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
编辑:除了使用基于表格的布局之外，这完全符合我的要求:
<div id="awards">
<div class="flexslider">
<ul class="slides">
<li>
<table>
<tr>
<td style="width:150px"><img alt="" height="24" src="/images/logo.png" width="150"></td>
<td>This is a test of the comment section and if I make this larger and larger?<br />test.com</td>
</tr>
</table>
</li>
</ul>
</div>
</div>
#awards .flexslider{
color:#222222;
height:100px;
width:940px;
margin:0 auto;
border:1px #dedede solid;
background:#ffffff url('/images/bg_diag.png') repeat;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#awards table{
width:auto;
height:100px;
margin:0 auto;
}
#awards table img{
margin-right:30px;
}
#awards table td{
height:100px;
vertical-align:middle;
}
最佳答案
试试这个(原始的编辑版本):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
#awards {
width:940px;
padding: 20px 0;
margin:0 auto;
border:1px #dedede solid;
background:#f1f1f1;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
#awards .flexslider{
display: table;
table-layout: fixed;
margin: 0 auto;
height: 100%;
}
.flexslider ul {
list-style: none;
padding-left: 20px;
}
.flexslider ul, .flexslider .img {
display: table-cell;
vertical-align: middle;
}
.img img {
vertical-align: bottom;
}
</style>
</head>
<body>
<div id="awards">
<div class="flexslider">
<div class="img">
<img src="image.gif">
</div>
<ul class="slides">
<li>multiple lines of text</li>
<li>multiple lines of text </li>
<li>multiple lines of text</li>
</ul>
</div>
</div>
</body>
</html>
编辑:(适合 flexslider 设置的新版本)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
#awards {
width:940px;
padding: 20px 0;
margin:0 auto;
border:1px #dedede solid;
background:#f1f1f1;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
ul.slides {
list-style: none;
margin: 0; padding: 0;
}
.slides li {
display: table;
table-layout: fixed;
margin: 0 auto;
height: 100%;
}
.text {
padding-left: 20px;
}
.text, .img {
display: table-cell;
vertical-align: middle;
}
.img img {
vertical-align: bottom;
}
</style>
</head>
<body>
<div id="awards">
<div class="flexslider">
<ul class="slides">
<li>
<div class="img">
<img src="image.gif">
</div>
<div class="text">
<p>multiple lines of text<br>
multiple lines of text multiple lines of text multiple lines of text<br>
multiple lines of text</p>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
关于css - 垂直对齐图像旁边的多行文本 - 全部居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16312075/