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

Question

我在 CSS 中遇到一些问题。如下图，图片需要居中，并且有 左侧的文本（靠近图像，而不是小提琴所示的间隙）。请注意，图像的宽度可以改变（它是一个滑块）。

我尝试将一个简单的margin: auto 放入图像中，然后将文本（左侧）的包装器与浮动右侧 - 所以在我看来它应该浮动到图像，但它没有（它在顶部创建一个间隙）并将文本向右浮动（当然因为有一个空白的顶部空间）。

这在纯 CSS 中可行吗？

我尝试做的是：

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

jsfiddle

Answer 1

非常感谢您的精彩回答：Axel。在 Alex answer 的帮助下，我实际上最终做的是将文本向左浮动一个容器的宽度（200px 宽度），将图像向左浮动，然后创建一个外包装，其宽度由文本容器的宽度和图像计算得出宽度和边距它自动:)

Answer 2

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

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

工作原理分解：

第一步是确保图像始终居中。为此，我创建了设置为 display: inline-block 的<div class="slideContent">。这会做两件事，它会导致.slideContent div 成为图像的宽度，并且它会居中（因为li 父级有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;
}

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