Centrage verticalement de deux & lt; div class = "span6" & gt; dans Bootstrap

Puisque vous êtes à l'aide d'une hauteur fixe et une seule ligne, vous pouvez facilement utiliser line-height pour cela.

.span6:first-child{
    line-height:300px;
}

.span6{
    line-height:170px;
}

Voir violon: http://jsfiddle.net/mA6Za/1/

Mise à JOUR

Si j'ai eu tort, ma réponse ne fonctionne pas, et voici pourquoi. Bootstrap est toujours l'application d'un float: left à tous <div class="span*"> éléments.

/* From Bootstrap; some differences based on media query */
[class*="span"]
{
   float: left;
   min-height: 1px;
   margin-left: 30px;
}

Vous pouvez remplacer ces règles en effectuant les modifications suivantes dans le .cell style de l'original de mes réponse:

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

Cependant, vous devrez alors vous perdez le responsive "l'empilement" des éléments sur les petits écrans (dont je ne pense pas que vous voulez) et au lieu de conserver le "tableau" l'apparence. Pour éviter cela, vous aurez probablement à faire de la display: table; float: none; style conditionnel avec vos propres requêtes de média.

Même encore, l'intention de Bootstrap a été de ne pas afficher le contenu en CSS table afin d'en substituant les styles pour ce faire, vous risquez d'introduire d'autres "bugs" sur votre écran.

Voici une mise à jour de violon à l'examen: http://jsfiddle.net/7Y8Jv/3/

RÉPONSE ORIGINALE À CETTE QUESTION

Est-ce que vous cherchez: http://jsfiddle.net/7Y8Jv/1/?

Mon balisage et les styles ne regarde pas beaucoup différente de la vôtre, mais je le centrage vertical que vous demandez.

Balisage

<div class="container">
    <div class="row table">
        <div class="span6 cell">What Is Lorem Ipsum?</div>
        <div class="span6 cell">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
</div>

CSS

.table
{
    display: table;
}

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

Utiliser quelques astuces avec jquery...

1) obtenir la durée de la hauteur avec l'id

2) faire quelques calculs pour la marge supérieure

3) ensuite, définissez css

Il travaille également sur la fenêtre de redimensionnement.

DÉMO sur jsfiddle...http://jsfiddle.net/q49Da/

HTML

<div class="container"> 
    <div class="row">   
        <div id="red" class="span6" style="background: red;width:40%;float:left;margin-right:5%;">
            Block 1 - Vertically center me please!<br />
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
        </div>
        <div id="blue" class="span6" style="background: blue;width:40%;float:left;">
            Block 2- Center me too<br />
            Contrary to popular belief, Lorem Ipsum is not simply random text.
        </div>
    </div>
</div>

JQUERY

$(document).ready(function() {
    var ver_top = ($(window).height() - $('#red').height()) / 2;
    $('#red').css( "margin-top", ver_top+'px' );

    var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
    $('#blue').css( "margin-top", ver_top2+'px' );

    $(window).resize(function(){
        var ver_top = ($(window).height() - $('#red').height()) / 2;
        $('#red').css( "margin-top", ver_top+'px' );

        var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
        $('#blue').css( "margin-top", ver_top2+'px' );
    });
});