0

I want to make content verticle align center with fixing the height. I've tried below css but did not worked. i dont want to use absolute postion method to use and cant change the markup.

row-fluid{display: table;}

.span7{
    display: table-cell;
    vertical-align: middle;
}

HTML:

<div class="row-fluid">
<div class="span7 paddingL10Pct">
 <div class="carou-title">Pan India search</div>
 <div class="carou-sub-title">Search properties by <span>City</span>, <span>Locality</span> or <span>Builder.</span></div>
  </div>

<div class="span5 paddingR15Pct">
  <div class="pull-left"><img src="http://placehold.it/250x500"></div>
                        </div>

</div>

CSS:

.carou-title {
    color: #f68500;
    font-family: "open-sans",Arial,Helvetica,sans-serif;
    font-size: 54px;
    font-weight: 300;
    line-height: 70px;
}
.span7{
  border:red solid 1px; float:left;
  }
.span5{ flaot:right;}
.carou-sub-title {
    color: #2e2e2e;
    font-family: "open-sans",Arial,Helvetica,sans-serif;
    font-size: 26px;
    font-weight: 100;
    line-height: 34px;
    margin-bottom: 0;
}

.row-fluid{ border:black solid 1px; width:800px; margin:0 auto; overflow: hidden;}

ex. http://codepen.io/anon/pen/CAfGq

Huangism
  • 16,278
  • 7
  • 48
  • 74
Praveen
  • 1,772
  • 3
  • 24
  • 42
  • 4
    All of us know a dozen ways to achieve this, you could find them on SO too, however take a look at this great collection provided by Chris Coyier few days ago: http://css-tricks.com/centering-css-complete-guide/ – Hashem Qolami Sep 04 '14 at 18:15
  • also, please avoid using words like best as they tend to generate levels of discussion not suitable for SO – Sam Denton Sep 04 '14 at 18:17
  • look here for a question just like yours http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css?rq=1 – Sam Denton Sep 04 '14 at 18:18
  • how about make fixed height and add property line-height ? – feesar Sep 04 '14 at 18:19
  • @Hashem Qolami ..they have used postion absolute method that i dont want. – Praveen Sep 04 '14 at 18:24
  • @Praveen There are 13 answers in the topic above, one of them should meet your needs. Also give the CSS-Trick's article a try and then come back if you faced any problem, we'll be glad to help. – Hashem Qolami Sep 04 '14 at 18:26

0 Answers0