0

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

introducir la descripción de la imagen aquí

Gracias

4
  • Podrías subir una imagen de como quieres que quede? De todos modos así a primera vista veo que tienes un line-height: 100px, eso está haciendo que se separe tanto el texto, Commented el 28 abr. 2022 a las 18:59
  • 1
    Si entiendo bien, estás tratando de centrar el texto verticalmente usando ese line-height. Hay mejores formas de hacerlo como display: flex, flex-flow: column y justify-content: center Commented el 28 abr. 2022 a las 19:01
  • Imagen añadida. El line-height tiene que ser el mismo que el height del div boton, para que el texto quede centrado verticalemente. Pero acabo de leer por ahí que sólo funciona con una línea de texto. Quería saber si dejándolo así se puede corregir de alguna manera y que quede tal como está en la imagen. Si no, probaré con display: flex. Gracias
    – Juaqui
    Commented el 28 abr. 2022 a las 19:18
  • 1
    Me parece que flex es la mejor opción en este caso. Commented el 28 abr. 2022 a las 19:56

1 respuesta 1

0

Esto es lo que ice: le puse un diplay: flex a .lineas y a .texto, acomodándose con align-items: center.

No es necesario que el texto tenga una entre líneas de 100px (line-height: 100px); queda muy mal. Con 1 es suficiente y normal.

.content {
    border: 1px solid black;
    width: 70%;
    overflow: hidden;
}
    
.linea {
    display: flex;
    align-items: center;
    border: 1px solid red;
    overflow: hidden;
}

.boton {
    width: 100px;
    height: 100px;
    background: lightblue;
    float: left;
    border: 1px solid black;
    margin: 2px;
}

.texto {
    display: flex;
    justify-content: left;
    align-items: center;
    border: 1px solid black;
    width: 50%;
    height: 100%;
    line-height: 1;
    vertical-align: middle;
    margin: 2px;
    padding: 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>

1
  • Recuerda marcar con si te ayudo. Esto servirá para otros que necesiten. Commented el 28 abr. 2022 a las 20:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.