Center an <h1> tag inside a <div>
I have the following <div> inside a <body> tag:
<div id="AlertDiv"><h1>Yes</h1></div>
And these are their C开发者_开发百科SS classes:
#AlertDiv {
position:absolute;
height: 51px;
left: 365px;
top: 198px;
width: 62px;
background-color:black;
color:white;
}
#AlertDiv h1{
margin:auto;
vertical-align:middle;
}
How can I vertically and horizontally align an <h1> inside of a <div>?
AlertDiv will be bigger than <h1>.
You can add line-height:51px to #AlertDiv h1 if you know it's only ever going to be one line. Also add text-align:center to #AlertDiv.
#AlertDiv {
top:198px;
left:365px;
width:62px;
height:51px;
color:white;
position:absolute;
text-align:center;
background-color:black;
}
#AlertDiv h1 {
margin:auto;
line-height:51px;
vertical-align:middle;
}
The demo below also uses negative margins to keep the #AlertDiv centered on both axis, even when the window is resized.
Demo: jsfiddle.net/KaXY5
On the hX tag
width: 100px;
margin-left: auto;
margin-right: auto;
There is a new way using transforms. Apply this to the element to centre. It nudges down by half the container height and then 'corrects' by half the element height.
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
It works most of the time. I did have a problem where a div was in a div in a li. The list item had a height set and the outer divs made up 3 columns (Foundation). The 2nd and 3rd column divs contained images, and they centered just fine with this technique, however the heading in the first column needed a wrapping div with an explicit height set.
Now, does anyone know if the CSS people are working on a way to align stuff, like, easily? Seeing that its 2014 and even some of my friends are regularly using the internet, I wondered if anyone had considered that centering would be a useful styling feature yet. Just us then?
<div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;">
<h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1>
</div>
You can try the code here:
http://htmledit.squarefree.com/
Started a jsFiddle here.
It seems the horizontal alignment works with a text-align : center. Still trying to get the vertical align to work; might have to use absolute positioning and something like top: 50% or a pre-calculated padding from the top.
You could add padding to the h1:
#AlertDiv h1 {
padding:15px 18px;
}
You can use display: table-cell in order to render the div as a table cell and then use vertical-align like you would do in a normal table cell.
#AlertDiv {
display: table-cell;
vertical-align: middle;
text-align: center;
}
You can try it here: http://jsfiddle.net/KaXY5/424/
加载中,请稍侯......
精彩评论