How can I center text inside a div element using CSS [duplicate]

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. stackoverflow.com/questions/2939914/… — Bokdem
– Bokdem, Commented Jul 23, 2014 at 14:00

Michael Parker · Accepted Answer · 2014-07-23 14:13:36Z

0

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/

answered Jul 23, 2014 at 14:13

Michael Parker

13k7 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex Char · Accepted Answer · 2014-07-23 14:00:43Z

0

You can use line-height:

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

fiddle

answered Jul 23, 2014 at 14:00

Alex Char

33.2k9 gold badges51 silver badges71 bronze badges

2 Comments

j08691 Over a year ago

What if the text is more than one line?

Alex Char Over a year ago

Then i suggest a sollution with display:table-cell.

Alex Wilson · Accepted Answer · 2014-07-23 14:01:22Z

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, 2014 at 14:01

Alex Wilson

2,41913 silver badges13 bronze badges

3 Comments

j08691 Over a year ago

What if the text is more than one line?

user1142130 Over a year ago

I also want to ask the same question. What if I have text that is two p rather than just one...

Alex Wilson Over a year ago

then solution with display:inline-table: and display:table-cell;

j08691 · Accepted Answer · 2014-07-23 14:05:12Z

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, 2014 at 14:05

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

joegandy · Accepted Answer · 2014-07-23 14:05:55Z

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, 2014 at 14:05

joegandy

3181 silver badge5 bronze badges

Comments

Manolis · Accepted Answer · 2014-07-23 14:13:12Z

0

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

answered Jul 23, 2014 at 14:13

Manolis

8911 gold badge14 silver badges34 bronze badges

Comments

lehi_net · Accepted Answer · 2014-07-23 14:13:30Z

0

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

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

answered Jul 23, 2014 at 14:13

lehi_net

5243 silver badges8 bronze badges

Comments

Suresh Karia · Accepted Answer · 2014-07-23 14:23:21Z

0

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>

edited Jul 23, 2014 at 14:23

answered Jul 23, 2014 at 14:13

Suresh Karia

18.4k19 gold badges69 silver badges85 bronze badges

2 Comments

user1142130 Over a year ago

Ok, the solution works however what if I have more than one line of text?

Suresh Karia Over a year ago

yes it will work in any line of text, Enjoy. if you have any query ask

Mark Reilly · Accepted Answer · 2014-07-23 16:29:59Z

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

Collectives™ on Stack Overflow

How can I center text inside a div element using CSS [duplicate]

9 Answers 9

Comments

2 Comments

3 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

2 Comments

3 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Linked

Related