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.
.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;
}
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:
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句