web-dev-qa-db-fra.com

Aligner verticalement le contenu de la colonne Bootstrap 3

Après être revenu au développement Web après une interruption de quatre ans, j'ai de la difficulté à aligner verticalement le contenu d'une colonne bootstrap 3 avec la colonne suivante. J'ai essayé de rechercher sur ce site ainsi que des recherches génériques en général et je n'ai tout simplement pas trouvé la bonne solution ... ou mes termes de recherche sont médiocres. 

Dans le HTML/CSS ci-dessous, je voudrais centrer verticalement le texte "Titre de la page" dans la colonne de gauche. J'aimerais que le code HTML et CSS soit aussi concis que possible tout en utilisant Bootstrap 3 CSS. Je pense donc que quelque chose de simple me manque complètement.

HTML 

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator">
    <div class="page-header-description"><small>Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>

CSS 

 .page-header-box {
 couleur de fond: # 3D3D3D; 
 border-bottom: 5px solid # b3b5b8; 
 marge-bas: 10px; 
 } 
 .page-header-title {color: # f79239; text-align: right; vertical-align: middle; margin: 10px 0; } 
 .page-header-seperator {border-left: 5px solid # 4e2f91; margin: 10px 0; } 
 .page-header-description {color: # febe10; } 
 .page-header-alt {margin-top: 5px; color: # 0093b2; } 
 

Voici un jsFiddle ... http://jsfiddle.net/E6LcY/8/

C’est l’une des rares fois que j’ai jamais posté, il serait donc formidable de me diriger dans la bonne direction.

csscss3twitter-bootstrap-3vertical-alignment
13
ACG

J'ai envisagé de supprimer cette question, mais je pensais que la réponse pourrait être utile à quelqu'un d'autre (comme moi) à la recherche d'une solution possible. 

Je voulais rester dans le cadre de Bootstrap 3 ... et j'ai fini par ajouter du JavaScript pour rendre le "titre" centré. J'ai pensé que Bootstrap 3 nécessite essentiellement jQuery pour certaines fonctionnalités, donc c'était OK.

Maintenant, je suis sûr qu'il y a peut-être un meilleur moyen, mais je n'ai pas aimé les autres solutions. Merci à tous ceux qui ont essayé de me mettre sur les bons chemins.

HTML

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title" id="header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator" id="header-seperator">
    <div class="page-header-description"><small>Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>
</div>

CSS

.page-header-box {
background-color:#3D3D3D;
border-bottom:5px solid #b3b5b8;
margin-bottom:10px;
}
.page-header-title { color:#f79239;text-align:right;margin-bottom:10px; vertical-align: middle; }
.page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; }
.page-header-description { color:#febe10; }
.page-header-alt { margin-top:5px;color:#0093b2; }

JS (en utilisant jQuery)

var sep_height = '';
$(window).on("load resize", function(e) {
var seperatorHeight = $('#header-seperator').height();
if (seperatorHeight != sep_height) {
    sep_height = seperatorHeight;
    var titleHeight = $('#header-title').height();
    var difference = ((seperatorHeight - titleHeight) / 2) + 5;
    $('#header-title').css('margin-top', difference + 'px');
}
});

Remarque: le paramètre "sep_height" sert uniquement à éviter les calculs inutiles et à modifier la hauteur du titre uniquement lorsque j'en ai besoin. J'ajoute également 5 pixels supplémentaires à la marge supérieure pour compenser les marges du texte de description.

Voici le dernier violon (avec un correctif pour l'événement onLoad): http://jsfiddle.net/E6LcY/15/

Merci encore à tous ceux qui ont aidé.

8
ACG

Voici comment je fais, vous pouvez essayer ceci:

.Parentdiv{
position:relative;
width:100%;
height:100%;
}

.Parentdiv .childdiv{
position: absolute;
top:0;
bottom:0;
margin:auto;
}
0
Mirage

Ajoutez la règle: line-height: 45px; à la classe col-md-2

FIDDLE MIS À JOUR

0
Danield

Je commence à en avoir assez de certains aspects du bootstrap. Parfois, la quantité de piratage nécessaire pour réaliser certaines fonctionnalités ne vaut pas les avantages supposés que vous en retirez.

Dans ce cas, j'ai mis fin à l'archivage de la fonctionnalité dont j'avais besoin en abandonnant l'amorçage et en combinant des flexbox avec les propriétés appliquées au parent:

.parent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

ceux aux enfants:

.parent > div {
  display: inline-block;
  vertical-align: middle;
}

et cette requête média:

@media all and (max-width: 500px) {
  .parent {
    /* for small screens, we use column direction rather than row */
    flex-direction: column !important;
  }
}

Le html impliqué est comme ceci:

<div class="parent">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Je l'ai utilisé, par exemple, pour un pied de page réactif. En jouant avec une combinaison de largeur et de marge fixes (identiques pour chacun), ils s’alignent joliment sur les autres en quantités différentes par ligne en fonction de la largeur de l’écran, jusqu’à ce qu’il soit suffisamment étroit pour ne les afficher que dans une ligne. . 

À mon avis, beaucoup plus clair, plus facile, plus propre et moins codé, avec une meilleure réactivité, une meilleure prise en charge de la mise en page, évite l'utilisation de javascript et sans tout le fardeau de bootstrap.

0
Pere