css - 将文本对齐到与中间对齐的图像的左侧

Question

我在 CSS 中遇到一些问题。如下图，图片需要居中，并且有它左边的文本(靠近图像，而不是 fiddle 中所示的间隙)。请注意，图像的宽度可以改变(它是一个 slider )。

我试图将一个简单的 margin: auto 放入图像中，然后将文本(左侧)包装在右边，所以在我看来它应该 float 到图像上, 但它不会(它在顶部创建一个间隙)并将文本向右浮动(当然是因为有一个空白的顶部空间)。

这在纯 CSS 中可能吗？

我尝试做的是:

img{
    margin:auto;
    display:block;
}
.description{
    float:right;
}

jsfiddle

Answer 1

绝对定位和表格单元格的组合将获得您正在寻找的对齐方式。

.slider {
    width:1000px;
    height:500px;
    border:1px solid black;
}

.slider ul {
    list-style:none;
    margin: 0;
}
.slider ul li {
    text-align: center;
    vertical-align: middle;
    width: 100%;
}
.slider .slideContent {
    display: inline-block;
    position: relative;
}
.slider ul li .description {
    left: -200px; /*Subtract the width of the description*/
    position: absolute;
    width: 200px;
}
.slider ul li .pictureContainer {
    display: inline-block;
}
.slider ul li img {
    width: 300px;
    margin: auto;
    display: block;
}

/*Align contents to the middle*/
.slider ul li .slideMiddle {
    display: table-cell;
    height: 500px;
    vertical-align: middle;
}

<div class="slider">
    <ul>
        <li>
            <div class="slideContent">
                    <div class="description">
                        <div class="slideMiddle">
                            <p>
                                Here should be some nice text near the image instead of left
                            </p>
                        </div>
                    </div>
                    <div class="pictureContainer">
                        <div class="slideMiddle">
                            <img src="http://i.imgur.com/SY9aY5S.jpg" />
                        </div>
                    </div>        
            </div>
        </li>
    </ul>
</div><!-- End slider -->

演示:http://jsfiddle.net/4su26Lbd/8/

其工作原理的分解:

第一步是确保图像始终居中。为此，我创建了 <div class="slideContent">设置为 display: inline-block。这会做两件事，它会导致 .slideContent div 成为图像的宽度，它将居中(因为 li parent 有 text-align: center; 。

.slider .slideContent {
    display: inline-block;
    position: relative;
}

现在要确保描述始终显示在图像的左侧，我们添加 position: relative;至 .slideContent .

然后你设置.description至 width: 200px; , 并使用 position: absolute; 将其强制向左然后定义 left: -200px;以抵消它自己的宽度。

.slider ul li .description {
    left: -200px; /*Subtract the width of the description*/
    position: absolute;
    width: 200px;
}

最后，我们想要垂直对齐内容，所以我们用类 .slideMiddle 创建子 div。并应用以下内容:

.slider ul li .slideMiddle {
    display: table-cell;
    height: 500px;
    vertical-align: middle;
}

高度定义与 slider 高度匹配，display: table-cell和 vertical-align: middle将导致内容在中间垂直对齐。