0

Мне нужно отцентрировать текст таким образом

введите сюда описание изображения

Вроде бы ничего сложного, но у меня текст по непонятным причинам перемещается на вторую строку.

введите сюда описание изображения

Текст был помещен в блок, которому были заданы высота и ширина. Затем он был отцентрирован внутри блока (text-align: center) и внутри родителя (margin: 0 auto).

body {
  background: pink;
}

* {
  margin: 0;
  padding: 0;
  font-size: 20px;
}

.groups_line {
    margin: 0 auto;
    width: 1565px;
    padding-right: 40px;
    padding-left: 40px;
    display: flex;
}

.line {
    width: 519px;
    min-height: 319px;
  height: fit-content;
    margin-right: 4px;
    position: relative;
  background: #63313a;
}

.line:last-child {
    margin-right: 0px;
}

.first_group {
    background-image: url(img/[email protected]);
}

.second_group {
    background-image: url(img/kaboompics.com_Woman_preparing_a_lunch_on_the_kitchen_table.png);
}

.third_group {
    background-image: url(img/photo-1453822858805-7c095c06011e.png);
}

.border {
    position: absolute; 
    width: 466px;
    height: fit-content;
    border: 3px solid #b59f5b;
    top: 170px;
    left: 50%;
    transform: translate(-50%);
}

.border > .heading {
    color: #b59f5b;
    font-family: "Open Sans";
    font-size: 14px;
    font-weight: 700;
  padding-top: 23px;
  padding-bottom: 16px;
    text-transform: uppercase;
  text-align: center;
  font-family: "Josefin Sans", sans-serif;
}

.text {
    color: #ffffff;
    font-family: "Josefin Sans";
    font-size: 20px;
    font-weight: 550;
    text-transform: uppercase;
  text-align: center;
  width: 353px;
  margin: 0 auto;
  font-family: "Josefin Sans", sans-serif;
}

.parent_data {
  display: flex;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  justify-content: space-between;
}

.data {
color: #ffffff;
font-family: "Open Sans";
font-size: 12px;
font-weight: 300;
position: absolute;
left: 0;
bottom: 0;
  line-height: 40px;
  margin: 0 7px;
}

.number {
color: #ffffff;
font-family: "Open Sans";
font-size: 12px;
font-weight: 300;
line-height: 40px;

}

.fa-comment {
  margin: 0 7px;
  color: #b59f5b;
}
.comment_logo {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 0;
}
}
.comment_logo {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 0;
}
  
<div class="groups_line">
            <div class="first_group line">
                <div class="first-group-line border">
                    <p class="group_line heading">beauty   health  lifestyle</p>
                    <p class="group_line text">FROM GRAPEFRUIT TO LEMONS TO ORANGES, CITRUS DOES YOU GOOD!</p>
          <div class="parent_data">
                      <p class="group-line data">June 14, 2015</p>
                      <div class="group-line comment_logo">
                          <p class="group-line number">24</p>
                          <i class="fas fa-comment"></i>
                      </div>
          </div>
                </div>
            </div>
        <div class="second_group line">
            <div class="second-group-line border">
                <p class="group_line heading">health</p>
                <p class="group_line text">5 Tips To Supercharge Your 
Motivation</p>
                <div class="parent_data">
                      <p class="group-line data">June 14, 2015</p>
                      <div class="group-line comment_logo">
                          <p class="group-line number">24</p>
                          <i class="fas fa-comment"></i>
          </div>
                </div>
            </div>
        </div>
        <div class="third_group line">
            <div class="third-group-line border">
                <p class="group_line heading">Beauty</p>
                <p class="group_line text">To Keep Makeup Looking Fresh Take A Powder</p>
                <div class="parent_data">
                      <p class="group-line data">June 14, 2015</p>
                      <div class="group-line comment_logo">
                          <p class="group-line number">24</p>
                          <i class="fas fa-comment"></i>
                      </div>
          </div>
            </div>
        </div>
    </div>

codepen

В чем может быть ошибка?

4
  • 1
    «текст по непонятным причинам перемещается» — по вполне понятным: шрифт другой, размеры букв другие, в ширину физически не влезают
    – andreymal
    Commented 28 сент. 2020 в 14:39
  • И вообще, жёстко прописывать 353 пикселя в коде - изначально хреновая идея. Даже если вы подключите правильный шрифт - никто не гарантирует, что браузеры отрисуют этот шрифт одинаково и ширина не увеличится сама по себе
    – andreymal
    Commented 28 сент. 2020 в 14:58
  • @andreymal если не прописывать размеры, то как тогда отцентрировать текст? Можно, конечно использовать flexbox, но тогда для одного элемента будет одновременно работать и flex, и позиционирование. Нормально ли это будет?
    – Eva
    Commented 28 сент. 2020 в 15:08
  • Ну, с банальным width: 90% я вижу отлично отцентрованный текст (можно поиграться с конкретным процентом для лучшего соответствия макету)
    – andreymal
    Commented 28 сент. 2020 в 15:10

1 ответ 1

1

.fa-comment {
  margin-left: 7px;
}
.comment_logo {
  display: flex;
  align-items: center;
}
.parent_data {
    display: flex;
    position: absolute;
    left: 15px;
    bottom: 0;
    right: 15px;
    justify-content: space-between;
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.