Question

甚至不确定这是否可行，但我想我会问。我已经搜索并尝试了许多“解决方案”，而我正在寻找什么。

容器宽940，高100。我想要在其右侧包含多行文本的图像。这两者作为一个整体应该在940x100内水平和垂直居中。我不会有图像或文字的宽度，因为这会改变 - 特别是因为我在滑块中使用它。

虽然我可以通过内部容器上的上边距/填充“模仿”这个，但我希望有一些明确的东西，而不是边距/填充的猜测。

我正在使用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;
}

Answer 1

试试这个（原版的编辑版）：

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

Answer 2

有一种方法可以在不添加额外元素的情况下执行此操作：

http://codepen.io/cimmanon/pen/seKfn

#awards .flexslider {
  height: 100px;
  text-align: center;
  width: 940px;
  margin: 0 auto;
  border: 1px #dedede solid;
  background: #f1f1f1;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}

ul.slides li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 100px;
  /* any width will do, fix for old Firefox */
  width: 100%;
}

ul.slides img {
  /* fallback for IE<10, hide from Safari */
  float: left;
}

ul.slides p {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
/* optional
  -webkit-flex: 1 auto;
  -ms-flex: 1 auto;
  flex: 1 auto;
*/
}

<div id="awards">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="http://placekitten.com/100/50" />
                <p>Lorem ipsum dolor sit amet...</p>
            </li>
            <li>
                <img src="http://placekitten.com/100/50" />
                <p>Lorem ipsum dolor sit amet...</p>
            </li>
        </ul>
    </div>
</div>

这将适用于IE＆lt; 10以外的所有内容。我为旧浏览器提供了一个后备，但它需要在Safari中隐藏。

垂直对齐图像旁边的多行文本 - 全部居中

2 个答案: