Adjust Position of Text with CSS

Question

I need to move the text shown in the slide component in order to center it.

Here is the site: http://cmarosac-cp52.webjoomla.es/fav/

The class is: 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;
}

I would like to locate what is the path for the file where I use the class flex-caption.

Answer 1

You can use the following CSS:

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

This will extend the caption box to the full width and position it at the bottom of the slider.

You need to go to line 252 of:

modules/mod_simple_responsive_slideshow/theme/flexslider.css

I assume you used your browser console to get the CSS for this element, so I hope you realise the browser console also tells you where the code is located ;)

Hope this helps

Answer 2

It's not easy to achieve what you ask for in your image, due to the (poor) way the slider renders it's code.

But here's a suggestions on how you can center the text vertically:

 /* 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%;
}

This will not center the text exactly, but close.