I have a very simple problem on vertical middle a span
using Bootstrap 2.3.2.
Requirements:
There are two columns, left column has a fixed height 300px because there is 300x300 image inside.
Right column has text and must be centered based on left column.
The whole thing must be responsive. That's why I am using responsive image.
If the second column goes down to bottom, its height must fit the size of text. That means I cannot set fixed height on the second column.
Must not use JS to solve this.
HTML:
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<img class="img-responsive" src="http://placehold.it/300x300"/>
</div>
<div class="span6 v-center">
<div class="content">
<h1>Title</h1>
<p>Paragraph</p>
</div>
</div>
</div>
</div>
CSS:
.v-center {
display:table;
border:2px solid gray;
height:300px;
}
.content {
display:table-cell;
vertical-align:middle;
text-align:center;
}
My code: http://jsfiddle.net/qhoc/F9ewn/1/
You can see what I did above: I basically set the second column span
as table and middle
the .content
table-cell. I copied that method here How to use vertical align in bootstrap (with working example here http://jsfiddle.net/lharby/AJAhR/)
My challenge is a bit different due to requirements above. Any idea on how to make it work? Thanks.
Add !important
rule to display: table
of your .v-center
class.
.v-center {
display:table !important;
border:2px solid gray;
height:300px;
}
Your display property is being overridden by bootstrap to display: block
.
Example
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With