Hi all,
I’m trying to vertically align text in a box that has a height that changes to match the width (so that it’s a perfect square). I just cannot get it to work. I’m trying to vertically align the text within the “smallbox” class.
Here’s my fiddle
Here’s my CSS:
* {
margin: 0;
padding: 0;
}
html, body {
background: yellow;
font-size: 2.5vmin;
}
body {
text-align: center;
}
#container {
margin: 0 auto;
width: 100%;
}
.box {
/*width: 200vmin;*/
width: 90%;
margin: 0 auto;
display: inline-block;
/*padding-bottom: 5vmin;*/
padding-bottom: 2.5%;
}
.smallbox {
position: relative;
float: left;
vertical-align: middle;
width: 16.8%;
border-radius: 2vmin;
font-size: 6vmin;
text-align: center;
word-wrap: break-word;
display: table;
table-layout: fixed;
color: red;
background-color: blue;
}
.smallbox b {
margin-top: 100%;
display: block;
zoom: 1.0;
}
.smallbox p {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-decoration: none;
display: table-cell;
vertical-align: middle;
}
.content {
width: 80%;
min-height: 28vmin;
background-color: white;
float: right;
border-radius: 2vmin;
font-size: 3.5vmin;
position: relative;
padding-bottom: 5vmin;
}
.content:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -4.75vmin;
top: 13.5vmin;
border-top: 3vmin solid transparent;
border-bottom: 3vmin solid transparent;
border-right: 5vmin solid white;
}
.title {
height: 5vmin;
padding: .75vmin 1.5vmin;
border-radius: 2vmin 2vmin 1vmin 1vmin;
margin: .5vmin;
font-weight: bold;
text-align: left;
color: red;
background-color: blue;
}
.text {
padding: .5vmin 2vmin;
text-align: center;
}
.left {
padding: .5vmin 2vmin;
position: absolute;
bottom: 0;
font-weight: bold;
}
.right {
padding: .5vmin 2vmin;
position: absolute;
bottom: 0;
right: 0;
font-weight: bold;
border-radius: 2vmin 2vmin 2vmin 2vmin;
margin: .5vmin;
color: red;
background-color: blue;
}
.right a {
text-decoration: none;
}
.arrowleft {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
Here’s my HTML:
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="box.css">
</head>
<body>
<div id="container">
<div class="box">
<div class="smallbox"><b></b><p>Onceuponatimeinafarawayland</p></div>
<div class="content">
<div class="title">Some Title</div>
<div class="text"><p>This is just some example text here</p>
</div>
<div class="left">Left</div>
<a href=""><div class="right">Right</div></a>
</div>
</div>
</div>
</body></html>
Thanks!
Try this
<div style=“display:table;height:300px;text-align:center;”>
Thanks Eric, but that does not work with my code.
Unfortunately you don’t have that many options if your height is dynamic. You may have to alter your code to flow well with the code I showed.
This is one area I haven’t actually obsessively drilled into the ground yet. Next on my list. A far a I know that’s the only way. But google will show you many examples by googling “css vertically center unknown height”
I have a degree in google search lol. I actually have spent many hours in the past watching lessons on proficient use of google search.
OK, thanks Eric. I’ll keep Googling.
Alternatively you can post this question over a css-tricks forum. There are many up and coming cocky css guys over there just waiting to solve new problems. No joke. Very active forum. Not to fond of the personalities over the though.
And here is the only other way I know to do this. Don’t know if this works with your code or not. But may give you some ideas. http://www.websitecodetutorials.com/code/css/css-vertical-&-horizontal-centered-div.php
PaulOB
March 9, 2013, 6:24pm
10
Hi,
If you are talking about the text only inside that blue box then you can centre it like this.
Add this:
.smallbox p:before{
content:" ";
display:inline-block;
vertical-align:middle;
height:100%;
width:1px;
}
.smallbox p span{
display:inline-block;
vertical-align:middle;
width:99%;
}
You will need an extra element inside the p element here.
<p><span>Onceuponatimeinafarawayland</span></p>
However because you have absolutely placed that p element there is no guarantee that the text will always fit inside that box. Also browser support for vmin is only in the very latest browsers (Chrome doesn’t seem to support it fully yet as the font-size is massive in chrome).
Thanks Paul! Works excellent! And thanks for letting me know about vmin, too! I had actually also been wondering about vmin, vh, and vw, but you answered before I could even ask! Thanks!
Pam, that was a clever trick to make the element a square.
As always Paul’s, solution is brilliant. I was going to suggest cleaning up the code with some pseudo elements:
<div class="smallbox"><p><span>Once uponatime inafarawayland</span></p></div>
.smallbox {
position: relative;
float: left;
width: 16.8%;
border-radius: 2vmin;
font-size: 6vmin;
text-align: center;
word-wrap: break-word;
color: red;
background-color: blue;
}
.smallbox:before {
margin-top: 100%;
display: block;
zoom: 1.0;
content:"";
}
.smallbox p {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.smallbox p:after, .smallbox p>span {
display: inline-block;
vertical-align: middle;
}
.smallbox p:after{
width:1px;
height:100%;
content:"";
margin-left:-1px;
}
alternatively you could do this :
.smallbox {
float: left;
width: 16.8%;
border-radius: 2vmin;
font-size: 6vmin;
text-align: center;
color: red;
background-color: blue;
position:relative;
}
.smallbox:before{ content:"";margin-top:100%; display:block;}
.smallbox .wrp{ position:absolute; top:0; left:0; bottom:0; right:0;}
.smallbox p {
display:table ;
height:100%;
}
.smallbox p span {display:table-cell; vertical-align: middle; height:100%; }
<div class="smallbox">
<div class="wrp"><p><span>Onceuponatimeinafarawayland</span></p></div>
</div>
I just wanted to point out tho, floating an element, or giving it position:absolute AUTOMATICALLY gives the element display:block; consequently that’s why you weren’t able to apply vertical-align ( as the P was not being displayed as a table element) Also word-wrap doesn’t work within table elements.
Thanks Ray! Very helpful as usual. And making the element a square in that method was actually a work of Paul’s brilliancy .