Try this:
.carousel-caption {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border-radius: 50%;
height: 25%;
width: 9%;
position: absolute;
top: 25%; /* Adjust to liking */
margin: 0 auto;
}
With this code it is the grey circle that is centered on the slider but not the text inside the circle.
Thank you for trying! 🙂
Mmm, mystified. Try reordered code:
.carousel-caption {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border-radius: 50%;
height: 25%;
margin: 0 auto;
position: absolute;
top: 25%;
width: 9%;
}
same result unfortunately 🙁
To be expected, to be honest. Which browser? I’m fixing with Firebug in FF.
Where are you adding the code?
Firefox too. I’m adding it in the custom css.
Something strange, as this is what I’m seeing (line 137):
.carousel-caption {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border-radius: 50%;
height: 25%;
width: 9%;
}
I tried this :
.carousel-caption h1 {
text-align : center;
vertical-align: center;
padding-right: auto;
padding-left: auto;
padding-top: auto;
padding-bottom: auto;
}
It seems to work on some titles of the slider’s pictures but not on all.
That is just the words, not the surrounding box.
So try with a bit more specificity:
.carousel-inner .carousel-caption {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
border-radius: 50%;
height: 25%;
margin: 0 auto;
position: absolute;
top: 25%;
width: 9%;
}
Leave it in the Custom CSS even if it doesn’t work – I want to see the new code being picked up.
Many thanks to work on it !
I applied the code you gave, you can look at it.
OK, I can see the code has worked this time. Is that the problem solved for you?
If so, I suggest you read up about Child Themes, and then move this code into a CT style.css
Can you change status to [resolved] in rhs sidebar if you’re happy please.
I’m sorry, I think it was misunderstood: I want to center the white text in the grey bubble and not center grey bubble in the slideshow area.
Thank you for advice to use a child theme.I do not know how it works but I’ll look.
Sorry! Sometimes happens haha!
Take my code out above and we’ll start again.
Yes especially since English is not my mother tongue and CSS either 😉
I removed the code and put the one I tried yesterday.
.carousel-caption h1 {
text-align : center;
vertical-align: center;
padding-right: auto;
padding-left: auto;
padding-top: auto;
padding-bottom: auto;
}
It works for a bubble slider but not the other two.
Try this:
.carousel-caption h1 {
font-family: giddyup std;
font-size: 200%;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
You’ve added the text-align:center further down, so I’ve moved it up. Take that entry out.
