html - texto - Vertical Alinear contenido en vuelo estacionario

centrar texto css

Question

He visto tantos artículos en Stack pero no puedo encontrar la respuesta a esto.

Intento mostrar el contenido cuando cierro una imagen. He hecho esto. Pero lo necesito verticalmente centrado. Habrá varias líneas en algunos de los bloques. He creado un JSFiddle aquí: https://jsfiddle.net/wkmepjnk/

¡Cualquier ayuda sería genial! Gracias

Mi html es:

<div class="grid-wrapper">

                <div class="grid-single">
                    <img src="images/qdeck-logo.png">
                        <div class="grid-content">
                        <span>
                            <div class="hover-content">
                            <h1>QDeck</h1>
                            <p>Q-Deck® decking or deckboards are available in four standard timber profiles, two anti-slip resistant timber profiles known as Q-Grip® and a composite profile in a range of colours known as Q-Deck Twinson.</p>
                            <div class="hover-button">More Info</div>
                            </div>
                        </span>
                    </div>
                </div>
                <!--Close Grid Single-->


            </div>
            <!--Close Grid Wrapper-->

Mi CSS:

.grid-wrapper {
    width:100%;
    height:auto;
    background-color:#ffffff;
    -webkit-box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
    box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
}

.grid-single {
    width:25%;
    height:auto;
    margin-right:-5px;
    display:inline-block;
    border:1px solid #e0e3e6;
    position: relative;
}

.grid-single h1 {
    font-family: ''montserratlight'';
    font-size:25px;
    line-height:30px;
    color:#ffffff;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:10px;
}

.grid-single img {
    width:100%;
    height:auto;
    margin-bottom:-5px;
}

.grid-single .grid-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #1ABC9C;
    opacity: 0;
    transition: opacity 0.1s;
    text-align:left;
}

.grid-single .grid-content span {
    display: block;
    position:absolute;
    top:10%;
    left:10%;
    width:80%;
    height:auto;
    text-align:center;
}

.grid-single .grid-content span p { 
    font-family: ''montserratlight'';
    font-size:14px;
    line-height:21px;
    color:#ffffff;
    margin-bottom:15px;
    letter-spacing:0px;
}

.grid-single .grid-content span p strong {  
    color:#a1cc3a;
    margin-bottom:4px;
}

.grid-single:hover .grid-content {
    opacity: 1;
}

.hover-button {
    display:inline-block;
    width:auto;
    height:40px;
    background-color:#2C3E50;
    padding:0px 20px;

    font-family: ''montserratlight'';
    font-size:15px;
    line-height:40px;
    color:#ffffff;

}

Answer 1

OK ... Entonces, después de trabajar con mi código, he descubierto cómo hacerlo.

Puedes verlo trabajando aquí: https://jsfiddle.net/x7s6f9jm/

Ahora puedo tener cualquier longitud de texto que quiera en el div y se ajusta muy bien.

He cambiado mi css a:

.grid-single .grid-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #1ABC9C;
    opacity: 0;
    transition: opacity 0.1s;
    text-align:left;
}

.grid-single .grid-content span {
    display: table;
    position:absolute;
    left:10%;
    width:80%;
    height:100%;
    text-align:center;
}

.hover-content {
    display:table-cell;
    background-color:#ff6600;
    vertical-align:middle;
}

¡Gracias por ayudar a todos!

Answer 2

Este span .grid-single .grid-content span que desea visualizar verticalmente centrado debe tener top:50%; y margin-top:-x; con x = la mitad de la altura del tramo.
Solo en tu caso agrega:

.grid-single h1 {
    margin-top: 0;
}

jdfiddle

Answer 3

Haré una prueba usando flex y justify-content:center; align-items:center; :

.grid-wrapper {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  -webkit-box-shadow: 0px -11px 10px -11px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px -11px 10px -11px rgba(0, 0, 0, 0.75);
  box-shadow: 0px -11px 10px -11px rgba(0, 0, 0, 0.75);
}
.grid-single {
  width: 25%;
  height: auto;
  margin-right: -5px;
  display: inline-block;
  border: 1px solid #e0e3e6;
  position: relative;
}
.grid-single h1 {
  font-family: ''montserratlight'';
  font-size: 25px;
  line-height: 30px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.grid-single img {
  width: 100%;
  height: auto;
  margin-bottom: -5px;
}
.grid-single .grid-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #1ABC9C;
  opacity: 0;
  transition: opacity 0.1s;
  text-align: left;
}
.grid-single .grid-content span p {
  font-family: ''montserratlight'';
  font-size: 14px;
  line-height: 21px;
  color: #ffffff;
  margin-bottom: 15px;
  letter-spacing: 0px;
}
.grid-single .grid-content span p strong {
  color: #a1cc3a;
  margin-bottom: 4px;
}
.grid-single:hover .grid-content {
  opacity: 1;
  display: flex;/*add flex*/
  justify-content: center;/*add this*/
  align-items: center;/*add this*/
}
.hover-button {
  display: inline-block;
  width: auto;
  height: 40px;
  background-color: #2C3E50;
  padding: 0px 20px;
  font-family: ''montserratlight'';
  font-size: 15px;
  line-height: 40px;
  color: #ffffff;
}
.grid-content span {
  border: solid 1px;
}

<div class="grid-wrapper">
  <div class="grid-single">
    <img src="http://placehold.it/400x400">
    <div class="grid-content"> <span>
                <div class="hover-content">
                <h1>QDeck</h1>
                <div class="hover-button">More Info</div>
                </div>
               </span>

    </div>
  </div>
  <!--Close Grid Single-->
</div>
<!--Close Grid Wrapper-->

Answer 4

Hay una manera de hacer esto que se ajusta al texto expandido. Probé tu demo pero la configuración es un poco complicada, así que hice una rápida desde cero para darte la idea. La clave es display: table; en el padre y display: table; cell; vertical-align: middle; display: table; cell; vertical-align: middle; en el niño

http://codepen.io/anon/pen/bVZZEL

<div class="wrapper">
  <img src="http://placehold.it/300x200" alt="" />
  <div class="overlay">
    <h3>Great Title</h3>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis totam deleniti.</span>
    <button class="btn btn-primary">View</button>
  </div>
</div>

.wrapper{
  display: table;
  width: 300px;
  height: 200px;
}

.overlay{
  display: none;
  vertical-align: middle;
  width: 300px;
  height: 200px;  
  background: #EEE;
  text-align: center;
}

.overlay .btn{
  margin-top: 5px;
}

.overlay h3{
  margin-top: 0;
}

.wrapper:hover img{
  display: none;
}

.wrapper:hover .overlay{
  display: table-cell;
}

Answer 5

intenta usar esto en lugar de estos estilos

.grid-single .grid-content {
    background: #1abc9c none repeat scroll 0 0;
    display: table;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: left;
    top: 0;
    transition: opacity 0.1s ease 0s;
    width: 100%;
}

.grid-single .grid-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 80%;
}