Vertical align middle with Bootstrap responsive grid

Question

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    lt div class  container-fluid  gt     lt div class  row-fluid  gt       lt div class  span6  gt           lt img class  img-responsive  src  http   placehold it 300x300   gt       lt  div gt       lt div class  span6 v-center  gt           lt div class  content  gt               lt h1 gt Title lt  h1 gt               lt p gt Paragraph lt  p gt           lt  div gt       lt  div gt     lt  div gt   lt  div gt    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

User · Accepted Answer

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

User · Answer

row       letter-spacing  - 31em      word-spacing  - 43em     col-md-4       float  none      display  inline-block      vertical-align  middle      Note   col-md-4 could be any grid column  its just an example here

[html] Vertical align middle with Bootstrap responsive grid

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to stylesheet