How can I center text inside a div element using CSS

Question

I want to center the text in paragraph elements both vertically and horizontally inside the div elements (red boxes). I'm trying to use vertical-align:middle but it's not working. Any help would be appreciated, Thanks.

http://jsfiddle.net/9NLtB/

.transparent-btn {
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    background-color: rgba(255, 0, 0, .90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    box-shadow:0px 0px 12px #2e2300;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    border-radius:15px 15px 15px 15px;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;
    margin:5px;
    display:inline-block;
    position:relative;
}

.transparent-btn:active {
    cursor:pointer;
    position:relative;
    top:2px;
}

#wrapper {
    text-align:center;
}

p {
    display:inline-block;
    vertical-align:middle;
}

This might help you out. http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div — Bokdem, Jul 23 '14 at 14:00

score 0 · Answer 1 · answered Jul 23 '14 at 14:00

0

You can use line-height:

p {
        display:inline-block;
        vertical-align:middle;
        line-height: 55px;
}

fiddle

answered Jul 23 '14 at 14:00

Alex Char

32,879
9
49
70

What if the text is more than one line? – j08691 Jul 23 '14 at 14:05
Then i suggest a sollution with `display:table-cell`. – Alex Char Jul 23 '14 at 14:07

score 0 · Answer 2 · answered Jul 23 '14 at 14:01

0

try this code

.transparent-btn {
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    background-color: rgba(255, 0, 0, .90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    box-shadow:0px 0px 12px #2e2300;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    border-radius:15px 15px 15px 15px;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;
    margin:5px;
    display:inline-block;
    position:relative;
    vertical-align:top;
}

p {
        display:inline-block;
        vertical-align:middle;
    line-height: 50px;
}

DEMO

answered Jul 23 '14 at 14:01

Alex Wilson

2,421
11
13

What if the text is more than one line? – j08691 Jul 23 '14 at 14:03
I also want to ask the same question. What if I have text that is two p rather than just one... – user1142130 Jul 23 '14 at 14:08
then solution with display:inline-table: and display:table-cell; – Alex Wilson Jul 23 '14 at 14:10

score 0 · Answer 3 · answered Jul 23 '14 at 14:05

0

You could do something like this:

jsFiddle example

On .transparent-btn use display:inline-table; and vertical-align:top;. Then set the CSS for p to:

p {
    display:table-cell;
    vertical-align:middle;
}

answered Jul 23 '14 at 14:05

j08691

204,283
31
260
272

score 0 · Answer 4 · answered Jul 23 '14 at 14:05

0

Add line-height:100px; I've removed the p tag to understand how it works exactly.

Fiddle: http://jsfiddle.net/9NLtB/8/

Also needed float left to align the divs

display:inline-block;
float:left;

answered Jul 23 '14 at 14:05

joegandy

320
1
5

Suresh Karia · Answer 5 · 2014-07-23T14:23:21.247

Solved your Problem see link Text-Aligned

This is the most efficient mehtod just added 2 css rules

vertical-align:middle;
line-height:100px;

and removed unnecessary <p> tag

You can align everything horizontally and vertically! just remember add line-height same as height of container and apply vertical align middle(here your container is 100px in height so used 100px line_height simple!

css

 .transparent-btn {
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    background-color: rgba(255, 0, 0, .90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    box-shadow:0px 0px 12px #2e2300;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    border-radius:15px 15px 15px 15px;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;
    margin:5px;
    display:inline-block;
    position:relative;
    vertical-align:middle;
    line-height:100px;
}
.transparent-btn:active {
    cursor:pointer;
    position:relative;
    top:2px;
}
#wrapper {
    text-align:center;
}

html

<div id="wrapper">
<div class="transparent-btn">text</div>
<div class="transparent-btn">text</div>
<div class="transparent-btn">text</div>
<div class="transparent-btn">text</div>
</div>

Ok, the solution works however what if I have more than one line of text? — user1142130, Jul 23 '14 at 14:22
yes it will work in any line of text, Enjoy. if you have any query ask — Suresh Karia, Jul 23 '14 at 14:24

score 0 · Answer 6 · answered Jul 23 '14 at 14:13

0

p {
    line-height: 100px;
    margin: 0;
}

answered Jul 23 '14 at 14:13

Manolis

893
1
14
33

score 0 · Answer 7 · answered Jul 23 '14 at 14:13

0

or use this code http://jsfiddle.net/9NLtB/11/

I added span and display:table and display:table-cell

answered Jul 23 '14 at 14:13

lehi_net

524
3
8

score 0 · Accepted Answer · answered Jul 23 '14 at 14:13

Add a line-height property to your div, then specify it as normal in your text element.

.transparent-btn {
    line-height: 100px;
    text-align: center;
}


span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

And yes, this works with multiple lines of text:

Demo: http://jsfiddle.net/9NLtB/12/

score 0 · Answer 9 · answered Jul 23 '14 at 16:29

I'm noticing that in your example the buttons with text are pushed down compared to the empty ones. I am assuming that's not the desired behavior.

You can use display: table; on the #wrapper and display: table-cell; on the .transparent-btn

#wrapper {
    display:table;
    margin: auto;
    border-collapse: separate;
    border-spacing: 5px;
}

.transparent-btn {
    display: table-cell;
    vertical-align: middle;
    font:bold 20px"Arial Black", Gadget, sans-serif;
    font-style:normal;
    color:#ffd324;
    background-color: rgba(255, 0, 0, .90);
    border:2px solid #000;
    text-shadow:0px -1px 1px #222222;
    -moz-box-shadow:0px 0px 12px #2e2300;
    -webkit-box-shadow:0px 0px 12px #2e2300;
    box-shadow:0px 0px 12px #2e2300;
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-radius:15px 15px 15px 15px;
    border-radius:15px 15px 15px 15px;
    width:100px;
    height:100px;
    text-align: center;
}

p {

}

Now margin: 5px; now longer works on .transparent-btn once it's set to display: table-cell;. So we use border-collapse: separate; and border-spacing: 5px; instead.

Also your unprefixed border-radius and box-shadow should come after the prefixed versions.

Here's the: JsFiddle

How can I center text inside a div element using CSS

9 Answers9