Div in the center? - css

Question

<li class="row">
<div class="small-6 column center">
<img src="test.jpg">
</div>
<div class="small-6 column center">
<p>hello</p>
</div>
</li>
I wish to make the hello p in the centre (vertically and horizontally) of it's column.
I do this with the styles:
p{
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}
The problem is, the second column is not the same height as the first column. How can I make it so that it is?
Here's my styles for columns:
.row{
width: 100%;
float: left;
.column{
width: 100%;
position: relative;
float: left;
display: block;
background: yellow;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
}
.small-1 {
width: 8.33333%; }
.small-2 {
width: 16.66667%;}
.small-3 {
width: 25%;}
.small-4 {
width: 33.33333%; }
.small-5 {
width: 41.66667%; }
.small-6 {
width: 50%; }
.small-7 {
width: 58.33333%; }
.small-8 {
width: 66.66667%; }
.small-9 {
width: 75%; }
.small-10 {
width: 83.33333%; }
.small-11 {
width: 91.66667%; }
.small-12 {
width: 100%; }
}
.pull-left{
float: left;
}
.pull-right{
float: right;
}
.center{
text-align: center;
}

Answer 1

you can do something like
.small-6 {
line-height: 60px;
}
or like this
.small-6 {
height: 60px;
}
change 60 to whatever works for you

Answer 2

You have a couple of options here.
Use JS to create equal height boxes - Foundation has an example of that here
Make the row "cleared" and stretch the text box to the top and bottom of it like this:
.box-content{
position: absolute;
top: 50%;
left: 50%;
margin: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%,-50%);
}
http://jsfiddle.net/ga24a/3/
Now its rather fragile when the text becomes larger - it cannot force the row container to be larger, only the img box can.
Use the new hyper super duber FLEX :D
http://jsfiddle.net/3n7Dj/1/
.row {
display: flex;
align-items: center;
...
}