Question

我正在努力解决CSS中的一些问题。如下图所示，图像需要位于中心，并且具有它左边的文字（靠近图像，而不是如小提琴中所示的间隙）。请注意，图像的宽度可能会发生变化（它是滑块）。

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

这在纯CSS中是否可行？

我试图做的是：

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

What I would like the result to look like

jsfiddle

Answer 1

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

分解其工作原理：

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

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

现在，为了确保说明始终显示在图片的左侧，我们将position: relative;添加到.slideContent。

然后，您将.description设置为width: 200px;，并使用position: absolute;将其强制向左，然后定义left: -200px;以对抗其自身的宽度。< / p>

.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将导致内容在中间垂直对齐。

Answer 2

非常感谢您的精彩回答：Axel。我实际上在Alex答案的帮助下最终做的是将文本浮动到左侧宽度的容器（200px宽度），将图像浮动到左侧，然后创建一个外部包装器，其宽度根据文本容器的宽度计算，再加上图像宽度和边距自动：）

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

2 个答案:

分解其工作原理：