In a container div I will show a series of lines, in each line a button and next to it a text
I want to center the text vertically, but when the text exceeds the width of the div, the text scrolls down a lot
.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>
How do I get the text centered and the lines together when the text is larger than the width of the div?
This is how I would like it to be
Thank you
This is what I iced: I put an
diplay: flex
a.lineas
and a.texto
, settling withalign-items: center
.The text does not need to have a 100px line spacing (
line-height: 100px
); it looks very bad. With 1 it is enough and normal.