0

SO I have this HTML layout:

<div class="container" style="height: 170px;">

<div class="wrapper">
    <div class="banner">
        <img class="logo" src="myimage.png">
    </div>
</div>

</div>

I am using display flex on wrapper class and I am trying to vertically aligned centered, I have tried to play around with align-content and justified-content, but either my logo stays at the top of the div or is stretcher out...here is my css code:

.wrapper {
    background: url(banner.jpg) no-repeat center center;
    background-size: cover;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.banner {
    text-align: center;
    width: 50%;
    /* filter: drop-shadow( 15px 15px 15px rgba(0, 0, 0, 1.00)); */
    padding: 0px 5% 0px 5%;
    background-color: rgba(0, 0, 0, 0.67);
    background-color: rgba(0, 0, 0, 0.67);
    height: 100%;
}

.logo {
    margin-top: 20px;
    max-width: 100%;
    max-height: 130px;
    margin-bottom: 20px;
}
user979331
  • 11,039
  • 73
  • 223
  • 418

1 Answers1

0

flexbox only works on the immediate child, so to get this working either remove height: 100% from the child (.banner) like so:

.banner {
    text-align: center;
    width: 50%;
    /* filter: drop-shadow( 15px 15px 15px rgba(0, 0, 0, 1.00)); */
    padding: 0px 5% 0px 5%;
    background-color: rgba(0, 0, 0, 0.67);
}

or add the flexbox parameters also to the child (.banner) and remove text-align (as it's not necessary any more) like so:

.banner {
    width: 50%;
    /* filter: drop-shadow( 15px 15px 15px rgba(0, 0, 0, 1.00)); */
    padding: 0px 5% 0px 5%;
    background-color: rgba(0, 0, 0, 0.67);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
minime
  • 344
  • 3
  • 10