how to center text html css - html

Question

i want to make the text "TITLE" in this html and css code,
#headerf {
background-color: #717571;
overflow-x: hidden;
position: fixed;
z-index: 99999;
}
.headert {
position: fixed;
z-index: 9999999;
width: 100%;
height: 60px;
top: 0px;
}
.headert h3 {
text-align: center;
color: white;
margin-top: 30px;
display: inline-block;
}
.headert a.h-left {
float: left;
color: white;
font-size: 1.5em;
margin-left: 1em;
margin-top: 30px;
position: relative;
display: inline-block;
}
.headert a.h-right {
float: right;
color: white;
margin-top: 30px;
position: relative;
margin-right: 1em;
font-size: 1.5em;
display: block;
}
<div id="headerf" class="headert">
LEFT
<h3>TITLE</h3>
RIGHT
</div>
or this http://jsfiddle.net/didinz/6vp34frd/
i have done everything i know but it still doesnt work(and become worse)
and i'm stuck
Thanks in advance guys ^_^

Answer 1

#headerf {
background-color: #717571;
overflow-x: hidden;
position: fixed;
z-index: 99999;
text-align: center;
}
.headert {
position: fixed;
z-index: 9999999;
width: 100%;
height: 60px;
top: 0px;
}
.headert h3 {
text-align: center;
color: white;
margin-top: 30px;
display: inline-block;
}
.headert a.h-left {
float: left;
color: white;
font-size: 1.5em;
margin-left: 1em;
margin-top: 30px;
position: relative;
display: inline-block;
}
.headert a.h-right {
float: right;
color: white;
margin-top: 30px;
position: relative;
margin-right: 1em;
font-size: 1.5em;
display: block;
}
h3 {text-align: center; display: block; width: 90%; margin: auto; left: 5%; position: absolute; top: 5px;}
<div id="headerf" class="headert">
<h3>TITLE</h3>
LEFT
RIGHT
</div>

Answer 2

If it is one line of text and/or image, then it is easy to do. Just use:
text-align: center;
vertical-align: middle;
line-height: 90px; /* the same as your div height */
that's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/ Look for "vertical align".
Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.

Answer 3

Use it this way:
h3 {
text-align: center;
display: block;
width: 90%;
margin: auto;
position: absolute;
top: 5px;
left: 5%;
}
Snippet
#headerf {
background-color: #717571;
overflow-x: hidden;
position: fixed;
z-index: 99999;
}
.headert {
position: fixed;
z-index: 9999999;
width: 100%;
height: 60px;
top: 0px;
}
.headert h3 {
text-align: center;
color: white;
margin-top: 30px;
display: inline-block;
}
.headert a.h-left {
float: left;
color: white;
font-size: 1.5em;
margin-left: 1em;
margin-top: 30px;
position: relative;
display: inline-block;
}
.headert a.h-right {
float: right;
color: white;
margin-top: 30px;
position: relative;
margin-right: 1em;
font-size: 1.5em;
display: block;
}
h3 {text-align: center; display: block; width: 90%; margin: auto; left: 5%; position: absolute; top: 5px;}
<div id="headerf" class="headert">
<h3>TITLE</h3>
LEFT
RIGHT
</div>