Best IT Recipes

Vertical-align: Medium with Bootstrap 2

I am using twitter bootstrap and I would like to align the vertical div block with the image and text on the right.

Here is the code:

 <ol class="row" id="possibilities"> <li class="span6"> <div class="row"> <div class="span3"> <p>some text here</p> <p>Text Here too</p> </div> <figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure> </div> </li> <li class="span6"> <div class="row"> <figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure> <div class="span3"> <p>Some text</p> <p>Some text here too.</p> </div> </div> </li> </ol>

I tried this but not wortks:

 .span6 .row{display: table;} .span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}

I also tried:

 .span6 .row .span3{display: inline-block; vertical-align: middle;}

No it works. Does anyone have an idea? Thanks in advance.

+31
html css html5 twitter-bootstrap-2
Jul 21 2018-12-12T00:
source share
5 answers

Try the following:

 .row > .span3 { display: inline-block !important; vertical-align: middle !important; }

Edit:

Fiddle: http://jsfiddle.net/EexYE/

You may need to add Diego float: none !important; if span3 is swimming and it intervenes.

Edit:

Fiddle: http://jsfiddle.net/D8McR/

In response to Alberto: if you fix the height of the line div, then to continue the vertical alignment in the center you will need to set the line height of the line in the same way as the height of the line pixel (i.e. up to 300px in your case). If you do this, you will notice that the children inherit the line height, which is a problem in this case, so you will need to set the line height for span3s to what it really should be (1.5 is an example of a value in a fiddle or 1.5 x font size, which we did not change when changing the height of the line).

+17
Jun 16 '13 at 0:13
source share

Try removing the float attribute from span6:

 { float:none !important; }
+4
Jun 11 '13 at 16:31 on
source share

If I remember correctly from my own use of bootstrap, the .spanN classes .spanN , which automatically forces them to behave like display: block . To make display: table-cell , you need to remove the float.

0
Jun 10 '13 at 23:10
source share

As in previous answers, you can always use the Pull attribute:



  <ol class="row" id="possibilities"> <li class="span6"> <div class="row"> <div class="span3"> <p>some text here</p> <p>Text Here too</p> </div> <figure class="span3 pull-right"><img src="img/screenshots/options.png" alt="Some text" /></figure> </div> </li> <li class="span6"> <div class="row"> <figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure> <div class="span3"> <p>Some text</p> <p>Some text here too.</p> </div> </div> </li>

0
Jun 11
source share

I use this

 <style> html, body{height:100%;margin:0;padding:0 0} .container-fluid{height:100%;display:table;width:100%;padding-right:0;padding-left: 0} .row-fluid{height:100%;display:table-cell;vertical-align:middle;width:100%} .centering{float:none;margin:0 auto} </style> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="offset3 span6 centering"> content here </div> </div> </div> </body>
0
Jun 19 '13 at 21:11
source share


More articles:


All Articles