Question

我需要移动幻灯片组件中显示的文本以使其居中。

以下是网站：http://cmarosac-cp52.webjoomla.es/fav/

课程是：flex-caption

.flex-caption {
width: 25%;
height: 96%;
padding: 2%; 
margin: 0; 
position: absolute; 
left: 0; 
bottom: 0; 
background: rgba(0,0,0,.3); 
color: #fff; 
text-shadow: 0 -1px 0 rgba(0,0,0,.3); 
font-size: 14px; 
line-height: 20px;
}

Answer 1

在CSS中向左更改为left: 35%;。

.flex-caption {
width: 25%;
height: 96%;
padding: 2%;
margin: 0;
position: absolute;
left: 35%;
bottom: 0;
background: rgba(0,0,0,.3);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
font-size: 14px;
line-height: 20px;
}

要将文字置于阴影中心，请添加text-align: center;。

将文本尽可能靠近垂直中心放置，同时保持框阴影不变为同一类的一部分：

.flex-caption {
width: 25%;
height: auto;
padding: 2%;
margin: 0;
position: absolute;
left: 0;
bottom: 0;
background: rgba(0,0,0,.3);
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
font-size: 14px;
line-height: 20px;
padding-top: 50%;
top: -70%;
text-align: center;
}

Answer 2

HTML

<div class="flex-caption">
     <span>Podemos poner tantas imágenes como queramos, hasta un máximo de 10</span>
</div>

CSS

.flex-caption {
    width: 25%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,.3);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    font-size: 14px;
    line-height: 20px;
    height: 100%;
}
.flex-caption span{
    -moz-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: absolute;
    top: 50%;
    padding: 0 20px;
    text-align: left;
}

希望这有助于：）

使用CSS调整文本的位置

2 个答案: