Viewing 15 replies - 1 through 15 (of 20 total)
  • 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;
    }
    Thread Starter SFIQUET

    (@sfiquet)

    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%;
    }
    Thread Starter SFIQUET

    (@sfiquet)

    same result unfortunately ??

    To be expected, to be honest. Which browser? I’m fixing with Firebug in FF.

    Where are you adding the code?

    Thread Starter SFIQUET

    (@sfiquet)

    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%;
    }
    Thread Starter SFIQUET

    (@sfiquet)

    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.

    Thread Starter SFIQUET

    (@sfiquet)

    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.

    Thread Starter SFIQUET

    (@sfiquet)

    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.

    Thread Starter SFIQUET

    (@sfiquet)

    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.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘Center slider Heading text vertical and horizontal – Customizr’ is closed to new replies.