-1

enter image description here

Hi, I want the logo 'Abyk Deco' to stay at the top of the page, but it's now centered along with the two heading text. How can I align this at the top using flexbox? I've tried this code.

<body>
<div class="banner">
    <div class="logo">
        <h1><a href="#">Abyk<span id="red">Deco<span></a></h1>
    </div>

    <div class="heading">
        <h1>ABYK DECO</h1>
        <h4>We make your dream home come true!</h4>
    </div>

</div>

The CSS:

    .banner{
    height: 100%;
    background-image: url(../img/1.jpeg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;  
    flex-direction: column;
    align-items: center;
    justify-content: center;
}  

.logo{
    color: #fff;
    font-size: 2em;
    font-family: 'Oswald', sans-serif;
    align-items: flex-start;
    justify-content: center;
}   

.logo a{
    color: #fff;
}

#red{
    color: red;
}

.heading{
    font-family: 'PT Sans', sans-serif;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.heading h1{
    font-size: 4.5em;
}

.heading h4{
    font-size: 2em;
}

How can I align the logo to the top while the heading texts stay at the center? I prefer to use flexbox to solve this problem. Thank You.

Asons
  • 84,923
  • 12
  • 110
  • 165
Sakir Inteser
  • 71
  • 12
  • I made a minor update to my 2nd sample, removing the logo's `h1`'s bottom margin, so it visually appears in the middle – Asons Oct 10 '17 at 07:53
  • Let me know if my answer were helpful and can be accepted? ... and if not, is there something I can adjust, add or explain? – Asons Oct 31 '17 at 14:07

6 Answers6

1

.container{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: flex-start;
  background-color: gray;
}

.logo{
  width: 200px;
  height: 200px;
  background-color: red;
}
<div class="container">
  <div class="logo">
    <p>Text something </p>
    <p>Something else </p>
    <p>What else?</p>
  </div>

</div>

Try to use this.

kyun
  • 9,710
  • 9
  • 31
  • 66
1

The main trick here to be able put the logo at the top and heading in the center of the viewport, is to use the ::after pseudo element to match the logo and then add this rule and make them equal high by setting flex-grow to 1 and flex-basis to 0

.logo, .heading, .banner::after {
  content: '';                      /*  for the pseudo to render  */
  flex: 1 1 0;                      /*  grow/shrink equal based on zero content  */
}

Stack snippet

html, body {
  height: 100%;
  margin: 0;
}
.banner {
  height: 100%;
  background-image: url(http://placehold.it/300x100/555);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  color: #fff;
  font-size: 2em;
  font-family: 'Oswald', sans-serif;
}

.logo a {
  color: #fff;
}

#red {
  color: red;
}

.heading {
  font-family: 'PT Sans', sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.heading h1 {
  font-size: 4.5em;
  margin: 0;                        /*  remove default margin  */
}

.heading h4 {
  font-size: 2em;
  margin: 0;                        /*  remove default margin  */
}

.logo, .heading, .banner::after {
  content: '';                      /*  for the pseudo to render  */
  flex: 1 1 0;                      /*  grow/shrink equal based on zero content  */
}
<div class="banner">
  <div class="logo">
    <h1><a href="#">Abyk<span id="red">Deco</span></a></h1>
  </div>

  <div class="heading">
    <h1>ABYK DECO</h1>
    <h4>We make your dream home come true!</h4>
  </div>

</div>

If the heading should be in the center of the space left (between the end of the logo and page bottom), use auto margin on the heading

html, body {
  height: 100%;
  margin: 0;
}
.banner {
  height: 100%;
  background-image: url(http://placehold.it/300x100/555);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  color: #fff;
  font-size: 2em;
  font-family: 'Oswald', sans-serif;
}

.logo h1 {
  margin-bottom: 0;                 /*  remove default margin  */
}

.logo a {
  color: #fff;
}

#red {
  color: red;
}

.heading {
  font-family: 'PT Sans', sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto 0;
}

.heading h1 {
  font-size: 4.5em;
  margin: 0;                        /*  remove default margin  */
}

.heading h4 {
  font-size: 2em;
  margin: 0;                        /*  remove default margin  */
}
<div class="banner">
  <div class="logo">
    <h1><a href="#">Abyk<span id="red">Deco</span></a></h1>
  </div>

  <div class="heading">
    <h1>ABYK DECO</h1>
    <h4>We make your dream home come true!</h4>
  </div>

</div>
Asons
  • 84,923
  • 12
  • 110
  • 165
0

Change align-items to flex-start

.banner{
    height: 100%;
    background-image: url(../img/1.jpeg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;  
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
ngearing
  • 1,325
  • 11
  • 18
0

Remove the following styles from banner class would do.

justify-content: center;
align-items: center;

Add the following styles to logo class

align-items: center;
justify-content: center;
display: flex;


body {
  margin: 0
}

.banner {
  height: 100%;
  background-image: url('https://images.designtrends.com/wp-content/uploads/2015/11/06084012/Dark-Brown-Bricks-Backgroud.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}

.logo {
  color: #fff;
  font-size: 2em;
  font-family: 'Oswald', sans-serif;
  align-items: center;
  justify-content: center;
  display: flex;
}

.logo a {
  color: #fff;
}

#red {
  color: red;
}

.heading {
  font-family: 'PT Sans', sans-serif;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.heading h1 {
  font-size: 4.5em;
}

.heading h4 {
  font-size: 2em;
}
<div class="banner">
  <div class="logo">
    <h1><a href="#">Abyk<span id="red">Deco<span></a></h1>
  </div>

  <div class="heading">
    <h1>ABYK DECO</h1>
    <h4>We make your dream home come true!</h4>
  </div>
</div>
Geethu Jose
  • 1,953
  • 2
  • 14
  • 30
0

Try to add flex-grow: 1; to the .heading, align-self: center; to the .logo and remove margin-top from the .logo H1 (optional)

HTML:

<div class="banner">
  <div class="logo">
      <h1><a href="#">Abyk<span id="red">Deco<span></a></h1>
  </div>

<div class="heading">
    <h1>ABYK DECO</h1>
    <h4>We make your dream home come true!</h4>
</div>

CSS:

.banner{
   height: 100%;
   min-height: 100vh;
   background-image: url(../img/1.jpeg);
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
   background-attachment: fixed;
   display: flex;  
   flex-direction: column;
 }  

.logo {
  color: #fff;
  font-size: 2em;
  font-family: 'Oswald', sans-serif;
  align-self: center; /*added*/
}   

 .logo a{
   color: #fff;
 }

 .logo H1 { /*added*/
   margin-top: 0;
}

#red{
   color: red;
}

.heading {
   font-family: 'PT Sans', sans-serif;
   color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   flex-grow: 1; /*added*/
}

.heading h1{
  font-size: 4.5em;
}

.heading h4{
  font-size: 2em;
}

Code exmaple on JSFiddle

Krusader
  • 116
  • 6
0

The trick is to add margin: 0 auto auto auto; to both your .logo and .heading

p.s. I have minimize the font size so that you can see the preview properly in the code snippet or just check out the preview on full screen

html{
  height:100%;
}
body{
  background:grey;
  height:100%;
}
.banner{
    height: 100%;
    background-image: url(../img/1.jpeg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;  
    flex-direction: column;
    align-items: center;
    justify-content: center;
}  

.logo{
    color: #fff;
    font-size: .9em;
    font-family: 'Oswald', sans-serif;
    margin: 0 auto auto auto;

}   

.logo a{
    color: #fff;
}

#red{
    color: red;
}

.heading{
    font-family: 'PT Sans', sans-serif;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto auto auto;
}

.heading h1{
    font-size: 2em;
    margin: 0;
}

.heading h4{
    font-size: 1.3em;
}



.logo h1 {
    margin: 0;
}

.heading h1 {
    margin-bottom: 0;
}
<div class="banner">
    <div class="logo">
        <h1><a href="#">Abyk<span id="red">Deco<span></a></h1>
    </div>

    <div class="heading">
        <h1>ABYK DECO</h1>
        <h4>We make your dream home come true!</h4>
    </div>

</div>
Vincent1989
  • 1,593
  • 2
  • 13
  • 25
  • It doesn't center it perfect in the viewport's middle, though it _looks_ like it does, because of the kept bottom margin on the `heading`'s `h4`. If to really center it, that bottom margin needs to match the `header`'s half height. – Asons Oct 10 '17 at 10:18
  • can the `.logo` be outside the `.banner` class? If yes then you can create two display:flex and position them separately. It is due to the nature of flex, the divs will always be position relatively to the adjacent divs, regardless is aligning or justifying center. Another solution will be using position absolute. – Vincent1989 Oct 10 '17 at 10:41
  • I am not the asker, and you can do this without absolute positioning, which I showed in my answer. I just wanted to notify you that this doesn't work 100%. And when using auto margins, as you can see in my 2nd sample, it is only needed on the `heading`, and would need the same fix I suggested in my previous comment. – Asons Oct 10 '17 at 10:44
  • 1
    Got it now, agreed, I can see that you are centering base using 3 vertically centered columns. and the second column will always centered itself – Vincent1989 Oct 10 '17 at 11:13