Comment puis-je verticalement au centre du texte sur une image réactive?

Comment puis-je obtenir le texte de la légende sur ces images pour se déplacer puis la fenêtre du navigateur est redimensionnée? Mon application est jicky et j'ai besoin d'un moyen de garder le texte de glisser lorsque la fenêtre est redimensionnée.

Codepen

<div class="row">
  <div class="col-md-6">
    <img src="http://placekitten.com/600/375" class="img-responsive" />
    <h2 class="homeImageLink">
      <span>Caption Text</span>
    </h2>
  </div>
  <div class="col-md-6">
    <img src="http://placekitten.com/600/375" class="img-responsive" />
    <h2 class="homeImageLink">
      <span>Caption Text</span>
    </h2>
  </div>
</div>

.homeImageLink {
   position: absolute; 
   top: 110px; 
   left: 0;
   text-align: center; 
   width: 100%; 
}

.homeImageLink span { 
    color: red;
    font-weight: 300;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 15px;
    pointer-events: none;
}
Avez-vous essayé d'utiliser un col-md-offset-4 col-md-4 classe sur la durée?
Non, je n'ai pas - comment puis-je gérer le centrage vertical avec ça aussi?
Ouais scratch, il ne fonctionne pas, je viens de réaliser ce que vous êtes en train de faire et il ne fonctionne pas pour la superposition du texte
Ah, la poisse. Merci pour le commentaire en tout cas!
Posté une réponse, vous ne savez pas si c'est ce que vous êtes après tho 🙂 Êtes-vous parler alignement vertical ou horizontal? Cela fonctionne pour l'alignement horizontal, les autres réponses montrent que l'alignement vertical

OriginalL'auteur drewwyatt | 2014-05-21

  1. 15

    Juste ajouter une classe de conteneur parent, faire c'est la position relative de l'.

    .img-container {
  position:relative;
}

    Et ensuite faire homeImageLink absolue et à donner les meilleurs autour de 45%..

    Il sera centrée verticalement..

    .homeImageLink {
   position: absolute; 
   top: calc(50% - 24px); //24px is font size of H1 I assume 
   left: 0;
   text-align: center; 
   width: 100%; 
}

    Démo ici : http://codepen.io/anon/pen/bJadE

    Pourquoi supérieure:45% et non de 50?
    Tout simplement parce que la hauteur de texte prend peu de hauteur.
    ah oui, qui aurait dû être évident
    Au lieu d'utiliser le haut: 45% top: calc(50% - [taille de police du texte])
    Une meilleure méthode est d'utiliser top: 50%; transform: translateY(-50%);. Pas besoin de suivre la hauteur de la ligne

    OriginalL'auteur Rahul Patil

  2. 0

    Je suis venu avec une autre solution, voici un travail de démonstration:

    http://codepen.io/niente0/pen/jyzdRp

    HTML:

    <DIV class=wrapper>
     <DIV class=divimage></DIV>
     <DIV class=divtext>THIS IS A TEST</DIV>
</DIV>

    CSS:

    HTML,BODY {
  max-width:1200px;
}
.wrapper {
  position:relative;
  width:100%;
  max-width:1200px;
  height:100%;
  min-height:320px
}
.divimage {  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url(https://thumbs.dreamstime.com/t/empty-red-banner-corners-ropes-textile-white-background-d-illustration-70434974.jpg);
  background-repeat:no-repeat;
  background-size:100% auto;
}
.divtext {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding-top:13.5%;  
  text-align:center;
  font-weight:bold;
  font-size:5vw;
  color:white;
  font-family:arial;
}
@media (min-width: 1200px) {
  .divtext{
    font-size:60px;
  }
}

    OriginalL'auteur Niente0