Display Flex Items Align Center

user_14810759 0
Viewed 1866

I am trying to make it so the second section or the first section will align center with the top.

What I don't understand is the relationship between items with display flex vs items that have display block.

First Question: Is there a way with flex so the top logo doesn't look "off" center compared to the centered text in the second section?

Link To Pen: https://codepen.io/skella1/pen/vYZLdVN

<div class="header">
  <img src="https://via.placeholder.com/100x50" alt="">
  
  <p>Text Goes Here</p>
</div>
<div class="secHeader">
  <h1>Welcome</h1>
  <p>This is a page to login</p>
</div>
<div class="content">
  <div class="login">
    <p style="padding-right: 10px;">Login</p>
    <input type="text">
    <button>Login</button>
  </div>
</div>


body {
  margin: 0px;
  padding: 0px;
}
.header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  img {
    margin: 0 auto;
  }
}
.secHeader {
  background-color: #ddd;
  text-align: center;
  display: block;
  line-height: 0px;
  padding: 20px;
  h1 {
    text-transform: uppercase;
    font-weight: 900;
  }
}
.content{
    background: url("http://www.placebear.com/500/300") center center no-repeat;
    background-size: cover;
  width: 100%;
  height: 100vh;
  position: relative;
  .login {
    width: 100%;    
    height: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    display: flex;
  }
}
flexbox css html
3 Answers

Center the image using justify-content: center on the flex parent element and then set the P elements position to absolute and position it using the top/right properties.

Right now you have two elements that are taking up space in the flex parent elements width. The image and the P tags content. Using justify-content: space-between will place the remainder of the width the elements do not use, between them. In turn skewing the look of the image from being in the center regardless of your margin set to 0 auto, as that only places it in the center of the space it takes up from the parent.

body {
  margin: 0px;
  padding: 0px;
}

.header {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
}
.header p {
  position: absolute;
  top: 0;
  right: 20px;
}

.secHeader {
  background-color: #ddd;
  text-align: center;
  display: block;
  line-height: 0px;
  padding: 20px;
}
.secHeader h1 {
  text-transform: uppercase;
  font-weight: 900;
}

.content {
  background: url("http://www.placebear.com/500/300") center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: relative;
}
.content .login {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0px;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  display: flex;
}
<div class="header">
  <img src="https://via.placeholder.com/100x50" alt="">
  
  <p>Text Goes Here</p>
</div>
<div class="secHeader">
  <h1>Welcome</h1>
  <p>This is a page to login</p>
</div>
<div class="content">
  <div class="login">
    <p style="padding-right: 10px;">Login</p>
    <input type="text">
    <button>Login</button>
  </div>
</div>

user_15335920

Answer to Question 1) A really quick fix to this was using the transform property in CSS to center the image with respect to the current position
Answer to Question 2) Simply set the max-width property on the .content class to prevent the scrolling you talked about

body {
  margin: 0px;
  padding: 0px;
}
.header {
  height: 50px;
  width:100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0px;
  img {
    margin: 0 auto;
    transform:translate(50%,0%);   /* MODIFIED CODE HERE */
  }
}
.secHeader {
  background-color: #ddd;
  text-align: center;
  display: block;
  line-height: 0px;
  padding: 20px;
  h1 {
    text-transform: uppercase;
    font-weight: 900;
  }
}
.content{
    background: url("http://www.placebear.com/500/300") center center no-repeat;
    background-size: cover;
  height: 100vh;
  max-width:100vw;       /* MODIFIED CODE HERE */
  position: relative;
  .login {
    width: 100%;    
    height: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    display: flex;
  }
}
user_141883790

If you're insisting on using flexbox for the header, what you can do is the following:

<div class="header">
  <div> 
  </div>
  <div class="text-center">
    <img src="https://via.placeholder.com/100x50" alt="">
  </div>
    <div class="text-right">
        <p>Text Goes Here</p>
    </div>
</div>

.header {
  height: 50px;
  display:flex;
  padding: 0px;
  justify-content: space-between;
  div {
    flex:1;
  }
  div.text-center {
    text-align:center;
  }
  div.text-right{
    text-align:right;
  }
}

Please note that this is just a workaround, flexbox is not the only solution here. You might use position:absolute for this.

user_119919410
Related