En un div contenedor mostraré una serie de líneas, en cada línea un botón y al lado un texto
Quiero centrar el texto verticalmente, pero cuando el texto sobrepasa el ancho del div, el texto se desplaza mucho hacia abajo
.content {
border: 1px solid black;
width: 70%;
overflow: hidden;
}
.linea {
border: 1px solid red;
overflow: hidden;
}
.boton {
width: 100px;
height: 100px;
background: lightblue;
float: left;
border: 1px solid black;
margin: 2px;
}
.texto {
float: left;
border: 1px solid black;
width: 50%;
line-height: 100px;
vertical-align: middle;
margin: 2px;
}
.clear {
clear: both;
}
<div class="content">
<div class="linea">
<div class="boton">
</div>
<div class="texto">
Este es el texto que acompaña al botón
</div>
</div>
<div class="clear"></div>
<div class="linea">
<div class="boton">
</div>
<div class="texto">
Este es el texto que acompaña al botón
Este es el texto que acompaña al botón
</div>
</div>
</div>
¿Cómo hago para que me centre el texto y las líneas queden juntas cuando el texto sea mayor que el ancho del div?
Así es como me gustaría que quedara
Gracias
line-height: 100px
, eso está haciendo que se separe tanto el texto,line-height
. Hay mejores formas de hacerlo comodisplay: flex
,flex-flow: column
yjustify-content: center