Set line-height:100px; vertical-align:middle
on #top.
Center h2 inside a div - very basics
-
29-03-2022 - |
Question
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 -
Solution
OTHER TIPS
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";
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow