Мне нужно отцентрировать текст таким образом
Вроде бы ничего сложного, но у меня текст по непонятным причинам перемещается на вторую строку.
Текст был помещен в блок, которому были заданы высота и ширина. Затем он был отцентрирован внутри блока (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>
В чем может быть ошибка?
width: 90%
я вижу отлично отцентрованный текст (можно поиграться с конкретным процентом для лучшего соответствия макету)