Support » Plugin: Slide Anything - Responsive Content / HTML Slider and Carousel » Vertical alignment

Vertical alignment

  • zehawk

    (@zehawk)


    5 years, 8 months ago

    Hello,

    Thank you for this great plugin.

    How does one make images (and content) vertically centered? Right now the top is aligned which doesnt look the best.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author simonpedge

    (@simonpedge)

    5 years, 8 months ago

    Hi, try using CSS Vertical Center with Flexbox.

    Here’s a handy tutorial:
    https://davidwalsh.name/css-vertical-center-flexbox

    Thread Starter zehawk

    (@zehawk)

    5 years, 8 months ago

    Hi Simon,

    I already tried with this earlier, but couldn’t get it to work.

    .imageVHcenter img {
  display:block;
  margin:auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

    and now I tried with flexbox here: https://peoplekonnect.co.in/extramile-sliders-version/

    I’ve wrapped the image to be displayed as follows in Slide 1:

    <div class="flexbox-container">
<h1 style="text-align: center;">Slide 1</h1>
<br /> <img class="aligncenter" src="https://peoplekonnect.co.in/wp-content/uploads/2017/08/FOOD-FOR-THOUGHT-3-80.jpg" alt="" width="864" height="525" /></div>

    But no luck. What am I missing?

    • This reply was modified 5 years, 8 months ago by zehawk.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Vertical alignment’ is closed to new replies.

Views