Как выровнять текст по центру по горизонтали и ВЕРТИКАЛЬНО в поле/контейнере?

Я пытаюсь создать веб-страницу, которая выглядит так:

Я работал с начальной загрузкой и создал строки, чтобы выровнять три варианта загрузки рядом друг с другом. Затем я создал контейнеры в этих строках (чтобы воспроизвести блоки) и выровнял по центру текст и значок загрузки по горизонтали. К сожалению, я не знаю, как выровнять по центру текст и значок по вертикали в контейнере. Кто-нибудь может помочь? Мой текущий дизайн выглядит так:

Текущий дизайн

Мой код выглядит следующим образом:

.download {
  font: Verdana, Helvetica, Arial, sans-serif;
  color: RGB(112, 112, 112);
  font-size: 18px;
  text-align: center;
  padding: 5px;
}

.download:hover {
  color: rgb(227, 111, 30);
  cursor: pointer;
}

#download-icon {
  font-size: 80px;
  float: left;
}

.container-border {
  border-style: solid;
  border-color: rgb(0, 143, 197);
  padding: 5px;
  min-height: 120px;
}

<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="container-border">
        <i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
        <p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
      </div>
    </div>
  </div>
</div>

Редактировать: Спасибо всем за ответы! Я очень ценю их. Для меня это сработало, просто настроив мой класс content-border с помощью:

.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
display: flex;
align-items: center;
/* vertical center */
}

Christina 21.11.2017 источник

comment

Возможно, установите для .container-border значение display: flex и присвойте ему justify-content: center и align-items: center. Это должно приблизить вас (в зависимости от того, какой другой CSS у вас там происходит). - delinear 21.11.2017

Ответы (4)

arrow_upward
1
arrow_downward

Вам не нужно ничего усложнять, используя FlexBox. Пожалуйста, используйте что-то вроде этого, макет таблицы или комбинацию line-height и vertical-align:

.download {
  font: Verdana, Helvetica, Arial, sans-serif;
  color: RGB(112, 112, 112);
  font-size: 18px;
  text-align: center;
  padding: 5px;
}

.download:hover {
  color: rgb(227, 111, 30);
  cursor: pointer;
}

#download-icon {
  font-size: 80px;
  vertical-align: middle;
  line-height: 120px;
}

#download-icon + span {
  vertical-align: middle;
  line-height: 1;
}

.container-border {
  border-style: solid;
  border-color: rgb(0, 143, 197);
  padding: 5px;
  min-height: 120px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="container-border">
        <i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
        <span class="download"> Download list of charities that have <b> not submitted </b> data yet </span>
      </div>
    </div>
  </div>
</div>

Предварительный просмотр

Soolie 21.11.2017

comment

Спасибо Сули! Я попробовал это решение, и, к сожалению, оно не сработало для меня, хотя логически оно имело для меня смысл. Я не мог понять, где была ошибка, поэтому я реализовал другое решение. Но все равно большое спасибо! - Christina; 23.11.2017

comment

Упс, извините, это был мой первый вопрос на StackOverflow. Только что принял :) - Christina; 23.11.2017

comment

@Кристина Спасибо! :) - Soolie; 23.11.2017

arrow_upward
1
arrow_downward

Я бы использовал flexbox для класса container-border. В этом случае вы можете удалить поплавки.

.download {
  font: Verdana, Helvetica, Arial, sans-serif;
  color: RGB(112, 112, 112);
  font-size: 18px;
  padding: 5px;
  text-align: center;
}

.download:hover {
  color: rgb(227, 111, 30);
  cursor: pointer;
}

#download-icon {
  font-size: 80px;
}

.container-border {
  border-style: solid;
  border-color: rgb(0, 143, 197);
  padding: 5px;
  min-height: 120px;
  display: flex;
  align-items: center;
  /* vertical center */
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="container-border">
        <i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
        <p class="download"> Download list of charities that have <b> not submitted </b> data yet </p>
      </div>
    </div>
  </div>
</div>

Gerard 21.11.2017

comment

Спасибо, Джерард, я применил ваше решение, и оно сработало! Я ценю вашу помощь! - Christina; 23.11.2017

arrow_upward
0
arrow_downward

добавить display: flex;align-items: center; к .container-border

.container-border{
 border-style:solid;
 border-color: rgb(0,143,197);
 padding: 5px;
 min-height:120px;
    display: flex;
    align-items: center;
 }

Znaneswar 21.11.2017

arrow_upward
0
arrow_downward

Почему бы просто не установить отступ:

.download {
    font: Verdana,Helvetica,Arial,sans-serif;
    color: RGB(112,112,112);
    font-size:18px;
    text-align:center;
    /* padding: 5px; <- removed */
    padding: 12px 5px 5px 5px; /* New */
}

#download-icon {
    font-size:80px;
    float:left;
    padding-top: 10px; /* New */
}

.container-border {
    border-style:solid;
    border-color: rgb(0,143,197);
    padding: 5px;
    min-height:120px;
    width: 300px; /* New*/
}

Демо:

.download {
    font: Verdana,Helvetica,Arial,sans-serif;
    color: RGB(112,112,112);
    font-size:18px;
    text-align:center;
    /* padding: 5px; <- removed */
    padding: 12px 5px 5px 5px; /* New */
}

.download:hover {
    color: rgb(227,111,30);
    cursor: pointer;
}

#download-icon {
    font-size:80px;
    float:left;
    padding-top: 10px; /* New */
}

.container-border {
    border-style:solid;
    border-color: rgb(0,143,197);
    padding: 5px;
    min-height:120px;
    width: 300px; /* New*/
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <div class="container-border">
                <i class="material-icons" style="color:rgb(0,143,197);" id="download-icon">file_download</i>
                <p class="download"> Download list of charities that have <b> not submitted                 </b> data yet </p>
            </div>
        </div>
    </div>
</div>

NullDev 21.11.2017

comment

Будучи обычным пользователем (с 729 повторениями), почему вы не можете использовать фрагмент стека? - Soolie; 21.11.2017

comment

@Soolie Потому что я не хотел добавлять сюда демо с раздутым кодом CSS. Посмотрите на скрипку. Мне также пришлось добавить код для значка. Несмотря на это, я не вижу ничего плохого в использовании JSFiddle. - NullDev; 21.11.2017

comment

Я в корпоративной сети и не могу получить доступ к сайту. Бывает с большинством из них. А также есть вероятность гниения ссылок. :) - Soolie; 21.11.2017

comment

@NullDev Я знаю, что размер не имеет значения. Но с 300px у вас самый маленький :) - Gerard; 21.11.2017

comment

@ Джерард Ха-ха, ну, судя по скриншотам, ОП не хочет такой длинной ;) - NullDev; 21.11.2017

Как выровнять текст по центру по горизонтали и ВЕРТИКАЛЬНО в поле/контейнере?

Ответы (4)

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