Выравнивать значок и текст

У меня есть проблемы в момент хотения поместить значок и текст в ту же линию.
Идея состоит в том, чтобы он остался, как он появляется в следующем изображении:

introducir la descripción de la imagen aquí

Но проблема состоит в том, что это у меня оказывается так:

introducir la descripción de la imagen aquí

Это код:

Todas las manzanas han sido asignadas a un supervisor

Кто-то, кто мог бы помогать мне пожалуйста...

1
задан 07.11.2019, 18:31
3 ответа

Я советую тебе, чтобы ты бросил глаз в flexbox . Я выровнял горизонтальной формы контент этикеток дочери (с display: flex) и aГ±adido один pequeГ±o край в текст (с 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>
3
ответ дан 01.12.2019, 12:21
  • 1
    Большое спасибо я я функционирую очень хорошо – fmye 07.11.2019, 18:29
  • 2
    @fmye твоя ошибка не flexbox, твоя ошибка tení схвати, применив один margin-top к тексту, по очевидным причинам это делает, что твой í конус был виден в posició n отличная касающаяся demá в. – Jheyman Mejia 07.11.2019, 18:39

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>

Надеялся, что он подает тебя!

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

6
ответ дан 01.12.2019, 12:21
  • 1
    Это правильный способ это осуществлять благодаря тому, что OP está распределяя tamañ или шрифта в í конус, поведение исправляется, дав ту же стоимость высоте lí nea. – Jheyman Mejia 07.11.2019, 18:42
  • 2
    Пожалуйста, добавляет pequeñ в explicació n, которого ты сделал в có я говорю, чтобы помогать гораздо лучше OP. – Francisco Romero 08.11.2019, 19:39

Лучшее состоит в том, чтобы он использовал flexbox . Я перемещаю тебя пример utilizГЎndolo. AdemГЎs - aГ±adido один pequeГ±o margin внизу и в левую сторону, чтобы налаживать лучше текст, с которым ты хочешь.

.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, чтобы использовать классы CSS, чтобы иметь все аккуратное добро и не бросать так стилей inline (style)

3
ответ дан 01.12.2019, 12:21
  • 1
    Большое спасибо твой пример я был много помощи – fmye 07.11.2019, 18:30

Теги

Похожие вопросы