2

Estoy teniendo problemas al momento de querer poner un icono y texto en la misma linea.
La idea es que quede como se muestra en la siguiente imagen:

introducir la descripción de la imagen aquí

Pero el problema es que me aparece asi:

introducir la descripción de la imagen aquí

Este es el codigo:

<div style="vertical-align:middle;">
                <div style="float:left;"><span class="glyphicon glyphicon-info-sign" style="color:dodgerblue; font-size:25px;"></span></div>
                <div style="margin-top:15px;">Todas las manzanas han sido asignadas a un supervisor</div>
            </div>

Alguien que pueda ayudarme por favor...

2
  • 1
    Ayudarías su pusieras el código de la clase enlacesfavoritos, que es la que afecta al texto. el 7 nov. 2019 a las 16:07
  • 1
    perdón, esa clase ya no la uso porque tampoco me funciono, se me olvido quitarla
    – fmye
    el 7 nov. 2019 a las 16:09

3 respuestas 3

7

div {
  display: inline-block;
  border: dotted 1px red;
  padding: 5px
}

.demo-text{
  clear: left;
  text-align: right;
  vertical-align: middle;
  line-height:25px;
}

span.glyphicon
{
  display:inline-block;
  vertical-align:top;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div>
                <span class="glyphicon glyphicon-info-sign" style="color:dodgerblue; font-size:25px;">
                </span>
                <span class="demo-text">Todas las manzanas han sido asignadas a un supervisor</span>
            </div>

Espero te sirva!

Créditos: https://stackoverflow.com/questions/37802067/align-bootstrap-glyphicons-vertically-with-text-on-both-sides

2
  • 4
    Esta es la forma correcta de implementarlo debido a que el OP está asignando un tamaño de fuente al ícono, el comportamiento se corrige al dar el mismo valor al alto de la línea. el 7 nov. 2019 a las 16:42
  • Por favor, agrega una pequeña explicación de lo que has hecho en el código para ayudar mucho mejor al OP. el 8 nov. 2019 a las 17:39
5

Te aconsejo que le eches un ojo a flexbox. He alineado de forma horizontal el contenido de las etiquetas hijas (con display: flex) y añadido un pequeño margen al texto (con margin-left: 10px).

<html>

    <head>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    </head>
    
    <div style="display: flex">
        <i class="fas fa-info-circle" style="color: blue;"></i>
        <div style="margin-left: 10px">Todas las manzanas han sido asignadas a un supervisor</div>
    </div>

</html>

2
  • 2
    Muchas gracias me funciono muy bien
    – fmye
    el 7 nov. 2019 a las 16:29
  • 5
    @fmye tu error no es flexbox, tu error lo tenías al aplicar un margin-top al texto, por obvias razones esto hace que tu ícono se vea en una posición distinta relativa a lo demás. el 7 nov. 2019 a las 16:39
4

Lo mejor es que use flexbox. Te paso un ejemplo utilizándolo. Además he añadido un pequeño marginabajo y a la izquierda para ajustar mejor el texto con lo que quieres.

.flexContainer {
  display:flex;
  align-items:center;
}

.customSpan {
  margin:0 0 4px 4px;  
}
.customIcon {
  color:dodgerblue;
  font-size:25px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="flexContainer">
    <div>
        <span class="glyphicon glyphicon-info-sign customIcon"></span></div>
    <div class="customSpan">Todas las manzanas han sido asignadas a un supervisor</div>
</div>

PD: Acostúmbrate a utilizar clases CSS para tener todo bien ordenado y no tirar tanto de estilos inline (style)

1
  • Muchas gracias tu ejemplo me fue de mucha ayuda
    – fmye
    el 7 nov. 2019 a las 16:30

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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