css - How to determine height and width of text in HTML? -
i having trouble getting block of text in center of page. text trying center:
<div id="directions"> <h2>use keyboard rotate face of cube in clockwise direction! <br>hold down shift key rotate desired face counter-clockwise. <br>use mouse rotate cube , zoom in , out.</h2> </div> in cascading style sheet, have following:
#directions{ position:absolute; top:80px; left:31.5%; text-align:center; } with above code, text (somewhat) centered in browser when fullscreen. when change size of browser, text becomes awkwardly shifted , not centered @ all. know need specify height , width of text, there easier way it? or me out height , width of text be?
thanks
a centered layout works this:
html
<div id="directions"> <h2>use keyboard rotate face of cube in clockwise direction! <br>hold down shift key rotate desired face counter-clockwise. <br>use mouse rotate cube , zoom in , out.</h2> </div> css
#directions { width: 500px; margin: 0 auto; background-color: #f0f0f0; } give inner div specific width , set margin left , right auto. center it. that's way centered layouts work. looks if browser window smaller actual content.
jsfiddle