#html #css
Вопрос:
Я хотел бы правильно центрировать свой заголовок Learn About Us
, как для заголовка What we do
, потому что, я думаю, есть задержка с изображением?
Я не понимаю, как центрировать, как в этом примере:
Здесь заголовки выровнены правильно.
Я заранее благодарю вас за вашу помощь и ваше время.
h2 {
font-size: 2.5rem;
color: rgb(28, 19, 37);
margin: 0;
}
p {
color: rgb(134, 134, 134);
margin: 1rem 0;
line-height: 1.5;
}
button {
outline: none;
border: none;
border-radius: 0.25rem;
background: rgb(28, 19, 37);
color: #F7CAC9;
font-size: 1rem;
letter-spacing: 0.5px;
text-decoration: none;
padding: 1rem 1.5rem;
}
.container {
display: flex;
font-family: sans-serif;
max-width: 1000px;
margin: 2rem auto;
}
.container img {
height: 350px;
margin: 1rem;
}
.section-header p {
position: relative;
}
.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}
.section-header p::after {
top: 11px;
margin: 0 10px;
}
.section-header p::before {
top: 11px;
margin-left: -45px;
}
.service .section-header {
width: 100%;
text-align: center;
}
<div class="about">
<div class="container">
<img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
<div class="content">
<div class="section-header">
<p>Learn About Us</p>
<h2>Welcome to Yooga</h2>
</div>
<div class="about-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
ornare
velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
ornare
velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non
nisl
nec nisi scelerisque maximus.
</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<!-- About End -->
<br />
<!-- Service Start -->
<div class="service">
<div class="container">
<div class="section-header">
<p>What we do</p>
<h2>Yoga For Health</h2>
</div>
</div>
</div>
Ответ №1:
Поскольку вы добавили- margin-left
45 пикселей для .section-header p::before
, вам нужно добавить 45 пикселей для margin-left
.content .section-header p
, чтобы отменить эффект.
h2 {
font-size: 2.5rem;
color: rgb(28, 19, 37);
margin: 0;
}
p {
color: rgb(134, 134, 134);
margin: 1rem 0;
line-height: 1.5;
}
button {
outline: none;
border: none;
border-radius: 0.25rem;
background: rgb(28, 19, 37);
color: #F7CAC9;
font-size: 1rem;
letter-spacing: 0.5px;
text-decoration: none;
padding: 1rem 1.5rem;
}
.container {
display: flex;
font-family: sans-serif;
max-width: 1000px;
margin: 2rem auto;
}
.container img {
height: 350px;
margin: 1rem;
}
.section-header p {
position: relative;
}
.content .section-header p{
margin-left: 45px;
}
.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}
.section-header p::after {
top: 11px;
margin: 0 10px;
}
.section-header p::before {
top: 11px;
margin-left: -45px;
}
.service .section-header {
width: 100%;
text-align: center;
}
<div class="about">
<div class="container">
<img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
<div class="content">
<div class="section-header">
<p>Learn About Us</p>
<h2>Welcome to Yoga</h2>
</div>
<div class="about-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<!-- About End -->
<br />
<!-- Service Start -->
<div class="service">
<div class="container">
<div class="section-header">
<p>What we do</p>
<h2>Yoga For Health</h2>
</div>
</div>
</div>
Комментарии:
1. Ах, хорошо, большое вам спасибо, Технарь, за ваши объяснения и ваше время.