it-swarm.dev

CSSでテキストの位置を調整する

スライドコンポーネントに表示されるテキストを中央に移動する必要があります。

これがサイトです: 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;
}

クラスflex-captionを使用しているファイルのパスを見つけたいのですが。

2

次のCSSを使用できます。

.flex-caption {
    height: auto;
    width: 100%;
    margin-bottom: 0;
    padding: 10px 0;
}

これにより、キャプションボックスが全幅に拡張され、スライダーの下部に配置されます。

次の行に移動する必要があります252 of:

modules/mod_simple_sensitive_slideshow/theme/flexslider.css

ブラウザコンソールを使用してこの要素のCSSを取得したと思いますので、ブラウザコンソールにもコードの場所が示されていることをご理解いただければ幸いです;)

お役に立てれば

2
Lodder

スライダーがコードをレンダリングする方法が(不十分)であるため、画像で要求することを達成するのは簡単ではありません。

enter image description here

しかし、テキストを垂直方向に中央揃えする方法についての提案は次のとおりです。

 /* Add left padding to go clear of arrow */
 p.flex-caption {padding-left: 50px;}

 /* Add empty box above */
 p.flex-caption:before {
  content: " ";
  display: block;
  height: 35%;
}

これはテキストを正確に中央に配置するのではなく、閉じます。

0
johanpw