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

Question

This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 8 years ago.
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;
}

Answer 1

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/

Answer 2

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

Answer 3

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

Answer 4

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;
}

Answer 5

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;

Answer 6

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

Answer 7

or use this code http://jsfiddle.net/9NLtB/11/
I added span and display:table and display:table-cell

Answer 8

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>

Answer 9

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