Vertical alignment in bootstrap's spans

问题:

Is there any work around for vertical alignment of elements or texts in bootstrap spans relative to other spans

For eg. if I have a row and spans like this

<div class="row-fluid">
   <div class="span3" style="background-color:lightblue">Description</div>
   <div class="span9" style="background-color:pink">
   Lorem ipsum Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  ....
   </div>
</div>

It looks like this

So is there a way to show "Description" vertically center of the next span's height?

回答1:

try display: table; for parent and display: table-cell; for child

JSFiddle

回答2:

If you are trying to vertically center an element for certain screen sizes you could always use media queries such as:

/*tablet*/
@media (min-width: 768px) and (max-width: 979px) {
  #logo{
    margin-top:70px;
  }
}
/*desktop*/
@media (max-width: 979px) {
  #logo{
    margin-top:20px;
  }
}
/*large desktop*/
@media (min-width: 1200px) {
  #logo{
    margin-top:0;
  }
}

回答3:

You could try out some absolute centering tricks with CSS. For example, if you're willing to: 1) declare the height of the div to be centered, and 2) Make your .row-fluid position: relative; then perhaps this sample could work for you.

Resulting in the following DOM:

<div class="row-fluid relative">
    <div class="span3">
        <div class="vercenter" style="background-color:lightblue">Description</div>
    </div>
    <div class="span9" style="background-color:pink">Lorem Ipsum...</div>
</div>

And CSS:

.relative {
    position: relative;
}
.vercenter {
    height: 1.5em;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
}

回答4:

I worked a lot on this , and a simple solution by using jquery is shown here !

<script>
$(document).ready(function(){
    var relheight=$('.span9').height() / 2;
    $('.span3').css('margin-top', relheight) ;

});
</script>

It works and i tested it also . If you like my answer please vote for me

回答5:

In Bootstrap there is no provision for such issue. It is implantation dependent. However you can write a css rule saying if next div exceeds the height of a previous div align the previous div at center height of next div & apply this class to the divs wherever you want this kind of behaviour.

回答6:

Check out this script-free solution.

<div class="row-fluid">
   <div class="span3" style="background-color:lightblue;margin:0px auto;float:none;">Description</div>
   <div class="span9" style="background-color:pink;clear:both;margin:0px auto;float:none;">
   Lorem ipsum Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  ....
   </div>
</div>

The code in action: jsFiddle

Just remove the inline styling and place it in your css file.

回答7:

$('.row').each(function() {
  var rowHeight = $(this).height();
  $(this).find("[class^='span']").each(function() {
    if ( $(this).height() < rowHeight-20) {
      var odstep = (rowHeight - $(this).height()) / 2 ; 
      $(this).css( "padding-top", odstep );
    }
  });
});