Center h2 inside a div - very basics
23,317
Solution 1
Set line-height:100px; vertical-align:middle
on #top.
Solution 2
You can use display:table
and display:table-cell
with vertical-aling property .
HTML
<div id="table">
<div id="top">
<h2>Personal webpage</h2>
</div>
</div>
CSS
#table{
width:100%;
display:table;
}
#top {
display: table-cell;
position: relative;
width:100%;
height: 100px;
background-color: rgba(89,144,222,.6);
vertical-align:middle;
}
#top h2{
text-shadow: 2px 2px black;
text-align: center;
color: white;
font-family:"Impact";
}
Comments
-
Filip Bartuzi about 4 years
I want to center h2 inside #top but vert-aliignt middle doesnt work same auto margin... I ave no idea what to do!
#top { display: block; position: relative; height: 100px; background-color: rgba(89,144,222,.6); } #top h2{ text-shadow: 2px 2px black; text-align: center; color: white; font-family:"Impact"; font-size: 50px; }
effect is -