CSS Layout Tutorial - 13 - Working in the header

In this video we will add a logo to header.

[geopolitics_globallookout]

hey, can we vertically align it by applying line-height except using this 5line code,

[shivaakrish]

position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

i haven't used the above property.


instead, i set the line-height property to match the height of the header div and added vertical-align:middle property.
this made my text aligned in the center.
h3{
vertical-align:middle;
line-height:90px;
}

pls tel me if it is wrong to code like this.

[EJMedia]

CSS Code for H3 element:

h1 {
font-size: 250%;

text-align:center;
color:#e5e4d7;
font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;

margin: 0px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

}

[azeletronics]

I have a couple of questions. 1.) Why will margin-top and margin-bottom not allow you to vertically center the text? 2.) Can you use line-height property to vertically center the text if you set a height for the div? I would like to know when you can and cannot use the two strategies I just mentioned. Thank you for making these tutorials, I appreciate it!

[AbhinavMalhotra]

why did you not use the line height property equal to 100px(height of header) or vertical align:middle to align the name of website in centre of header div?

[shashikataria]

Please make a tutorial on how to make a drop down menu

[mkii]

Hi. Thanks for the tutorials EJ Media. In the last line of code if i set top: 25%, it sets to centre. My Question is will it work correctly in other webpages if i dont write the next 3 codes ?

[Khnneo]

2:53 Have you made a video to explain the vertical center alignment. i need to learn this

[ramtiwari]

why "vertical-align:center;" this command can not do vertical alignment?

[jerryrincon]

thank you for teaching us and me so far I had watched html and css series and half of css layouts thanks I am learning really really good and I'm barley 14 imagine by the time im 21 ill probably have a huge website created like Instagram example, thanks a lot for ur videos

[animan]

The "position relative" thing smacked of x-y coordinates to me, so I changed to 25% on all the values and brought it up the page. Mine turned out lower on the page than yours did, with the numbers you had.

[zainbashir]

You seemed to much busy while making this tutorial

[shahdabtemori]

With all respect


i want to say that in this tutorial( no 13) insted of using the "transform properties" you could use the relative positioning to align it vertically for example-: {position: relative; top: 25%;}
and it would hv aligned in between vertically . since then m confused .. a little .
because you used transform properties and din't explain it .
because it is an advace level we are learning basic or begining level.
i want to kknow that why dint you do like that ..
or it had to be this way..

[azh]

Thanks for your vedio, i have questions in this vedio, when you set h3 margin 0px, this will override #header margin 10px cause inheritance? i might understand.if i set #header margin that mean's i set the margin distance between #header and body..if i set #h3 margin that mean's i set the margin distance between #header and h3.i want to see your Photoshop Tutorial in the further

[retarddevil]

hey! how to create the footer without down space and header without upper space with no side gaps in header and footer?

[khalilurrahman]

Pretty useful tutorial as well. Thanks. :)

[jazzsmith]

-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

didnt work for me but when i change transform: translateY(-50%); to transform: translateY(50%); it worked..strange
also i dont have position relative and top 50%...

[aravindbasmi]

The properties which are mentioned from 2:23 are not working on my webpage and I don't know why.

position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

Could you please help me out with this?

[garrettosbourn]

are there any other ways to center text vertically my computer deosn;t recognize that code

[废柴小飓風]

whoa~~~


line-height:90px same as below


position:relative;
top:50%;

-ms-transform: translateY(-50%);
transform: translateY(-50%);