make text content of a div center in the div

Question

i have a div in my HTML like this:

<div id="audio"><span>فایل های صوتی</span></div>

the CSS of these 2 elements is like this:

#audio{
 width: 100%;
 height: 11%;
 background-color: #3F1954;
}

span{
 font-size: 20px;
 color: white;
 text-align: center;
 font-family: btitr;
}

i want that the span be center (horizentaly and verticaly) in the div and when i zoom in or zoom out my page it remains center. if i remove the span tag, with

text-align: center;

i can make it center(but only horizentaly) what should i do to make it center verticaly? should i remove span or it must be remain?

http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers search... — Adrian, Oct 02 '14 at 06:12

score -1 · Answer 1 · answered Oct 02 '14 at 07:12

You can add display: table in div css and vertical-align: middle , display: table-cell in span css. Live Demo

HTML Code:

<div id="audio"><span>فایل های صوتی</span></div>

CSS Code:

#audio {
    width: 100%;
    height: 20px;
    background-color: #3F1954;
    text-align: center;
    display: table;
}
span {
    font-size: 20px;
    color: white;
    text-align: center;
    font-family: btitr;
    vertical-align: middle;
    display: table-cell;
}

Result:

result

make text content of a div center in the div

1 Answers1