使用CSS調整文本的位置

-2

我需要移動幻燈片組件中顯示的文本以居中。使用CSS調整文本的位置

這裏是網站：http://cmarosac-cp52.webjoomla.es/fav/

類是：FLEX-標題

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

來源

2014-10-20 sistemas sistemas

很好。祝你好運。你有問題嗎？ – 2014-10-20 14:36:47

您應該使用新的joomla.stackexchange.com進行joomla問題。 – pathfinder 2014-10-20 14:47:10

更改留給left: 35%;在你的CSS。

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

來源

2014-10-20 14:40:38 Aibrean

我需要移動文本。如果我設置了左側：35％，我將陰影框居中...... – 2014-10-20 15:14:23

陰影框是'.flex-caption' CSS的一部分。所以只需從CSS中刪除背景，你就不會有陰影框。 – Aibrean 2014-10-20 15:17:42

但我需要陰影框...和地點是正確的，左：0，寬度25％和高度：96％....問題是我需要居中文本...現在文本顯示在頂端？ – 2014-10-20 15:28:18

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

希望這有助於:)

來源

2014-10-20 16:09:42

Steve，你可以找到，用螢火蟲，我必須編輯的HTML文件的路徑？我對此有新... – 2014-10-20 16:30:55

您可以使用開發工具的全局搜索功能來查找包含指定文本的HTML文件的路徑。例如，搜索橫幅底部的文本（即「AQUÍPODEMOS PONER UN SLOGAN O FRASE RELEVANTE」） – 2014-10-20 16:50:33

該文本以Joomla模塊的配置形式引入...然後，我無法通過文本以添加span標籤 – 2014-10-20 21:23:47

使用CSS調整文本的位置

回答

相關問題