Hansen sert Hansen sert - 1 month ago 15
CSS Question

Flexbox centering logo and 2 buttons

I have some problem with my html and css, I'm trying to make simple responsive site using flexbox which I never have used before. What I'm trying to do is I have circular logo which I have centralized using transform, the

align-items:center;
did not work? But
justify-content: center;
did work but now I have to buttons that I need to centralize to, one to the left of the logo and the the other to the right, and I cannot make it work. What is it that I'm doing wrong?



html,body {
background: url(somepicture) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Roboto', sans-serif;
}


.parent {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}


img{
max-width: 100%;
min-width: 200px;
}

.child1{
display: flex;
align-items: center; /* align vertical */
justify-content: center; /* align horizontal */

}

.child2{
display: flex;
align-items: center;
justify-content: center;

}

.btn.btn-twitter {
background-color: transparent;
color: #eacc93;
border-color: #eacc93;
border-size: 2px;
border-radius: 0;
font-size: 14px;


}

.btn.btn-twitter:hover {
background-color: transparent;
color: #fff;
border-color: #fff;
border-size: 2px;
border-radius: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="parent">
<div class="child1">
<button type="button" class="btn btn-twitter btn-lg"><i class="fa animated infinite flash"></i> Button1</button>
</div>
<div class="child2">
<button type="button" class="btn btn-twitter btn-lg"><i class="fa animated infinite flash"></i> Button2</button>
</div>
<img src="img/myimg.png">
</div>




Answer

You're assigning the flex properties to the children instead of the parent. You need to remove the flex rules you've applied to .child1 and .child2 and apply them to .parent.

Then, to get your image in the center, you can either move the <img> in between the two buttons in the HTML, or you can use flexbox's order property to change the order of the elements.

@import url('https://fonts.googleapis.com/css?family=Roboto');

html,body {
    background: url(pictures/background.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Roboto', sans-serif;
}


.parent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    display: flex;
    justify-content: center;
    align-items: center;
}


img{
    max-width: 100%;
    min-width: 200px;
    height: 200px;
    order: 2;
}

.child1{
    order: 1;
}

.child2{
    order: 3;
}

.btn.btn-twitter {
    background-color: transparent;
    color: #eacc93;
    border-color:  #eacc93;
    border-size: 2px;
    border-radius: 0;
    font-size: 14px;


}

.btn.btn-twitter:hover {
    background-color: transparent;
    color: #fff;
    border-color: #fff;
    border-size: 2px;
    border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="parent">

        <div class="child1">
            <button type="button" class="btn btn-twitter btn-lg"><i class="fa animated infinite flash"></i> Button1</button>
        </div>

        <div class="child2">
            <button type="button" class="btn btn-twitter btn-lg"><i class="fa animated infinite flash"></i> Button2</button>
        </div>

         <img src="https://i.stack.imgur.com/Gnthm.png">

</div>

JSFiddle if you want to play with it.

Comments