我在 CSS 中遇到一些问题。如下图,图片需要居中,并且有 它左边的文本(靠近图像,而不是 fiddle 中所示的间隙)。请注意,图像的宽度可以改变(它是一个 slider )。
我试图将一个简单的 margin: auto
放入图像中,然后将文本(左侧)包装在右边,所以在我看来它应该 float 到图像上, 但它不会(它在顶部创建一个间隙)并将文本向右浮动(当然是因为有一个空白的顶部空间)。
这在纯 CSS 中可能吗?
我尝试做的是:
img{
margin:auto;
display:block;
}
.description{
float:right;
}
最佳答案
绝对定位和表格单元格的组合将获得您正在寻找的对齐方式。
.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
将导致内容在中间垂直对齐。
关于css - 将文本对齐到与中间对齐的图像的左侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27159812/