【问题标题】:Align text to the left of an image aligned to the middle将文本对齐到与中间对齐的图像的左侧
【发布时间】:2015-01-25 09:50:49
【问题描述】:

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

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

这在纯 CSS 中可行吗?

我尝试做的是:

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

jsfiddle

【问题讨论】:

  • 我首先想到的?网格布局。
  • (OT) 只是出于好奇,右边的空间是做什么用的?
  • 用于宽幅图像。所以不宽的图像当然会留下一些空间:)

标签: css image text alignment


【解决方案1】:

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

【讨论】:

    【解决方案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&lt;div class="slideContent"&gt;。这会做两件事,它会导致.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-cellvertical-align: middle 会导致内容在中间垂直对齐。

    【讨论】:

    • 这是一个很好的例子,但也许我没有解释清楚:)。在您的情况下,图像并不总是居中。图像需要始终居中。然后文本向左对齐。
    • 我已经更新了代码以说明图像居中。绝对定位需要更多的努力。
    • 我还详细介绍了它的工作原理,希望能帮助您理解原理。