CODEWITHSUNDEEP
htmlcss
Kevin P.
Kevin P.

Reputation: 1053

vertically center an overflow image

I can't seem to solve my issue with the solutions I have found online. The image simply won't move.

I am looking to center the image vertically in my div. So instead of it showing from the top down, it starts somewhere in the middle.

HTML

<article class="banner">
    <button class="button">Schedule your FREE assesment</button>
    <img class="mySlides" src="images/img1.jpg" width="100%">
    <img class="mySlides" src="images/img2.jpg" width="100%">
    <img class="mySlides" src="images/img3.jpg" width="100%">
    <img class="mySlides" src="images/img4.jpg" width="100%">
</article>

CSS

.banner {
    position: relative;
    background-color: #212121;
    height: 180px;
    width: 100%;
    overflow: hidden;
    opacity: .80
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button {
    position: absolute;
    margin-left: -14%; /* Anyway to make this centered more eficiently? */
    margin-top: 5%;
    border: 0;
    background-color: #C60505;
    color: white;
    padding: 15px 25px;
    font: Arial-Heavy;
    font-size: 20px;
    cursor: pointer;
    border-radius: 8px;
    text-shadow: 1px 1px #000000;
}

It is worth mentioning the class attached to the images is linked to JS that has a slideshow-like effect.

Upvotes: 0

Views: 78

Answers (1)

Johannes
Johannes

Reputation: 67748

.button should have thse settins to center it (vertically and horizontally):

.button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

This moves button's top left corner into the exact middle of its parent element (using top and left 50%) and then moves it back 50% left and up of its own width and height (using the transorm parameter), therefore centering it inside the parent element.

If you really only want vertical centering, use only top: 50%; and transform: translateY(50%).

Upvotes: 1

Related Questions