이와 유사한 게시물을 최대한 많이 살펴 봤지만 아무 소용이 없었습니다. 부모 "Hero"섹션을 중심으로하는 H1이 있고 H1 내에 범위를 포함하여 모든 텍스트가 중앙에 위치하도록하고 싶습니다 ( 스팬 포함)
스팬이 추가되면 전체 H1의 중심에 포함되지 않고 중앙 H1의 오른쪽에서 시작하는 것처럼 보입니다. 이는 더 작은 화면 크기에서 페이지 밖으로 밀려 나고 반응이 잘되지 않음을 의미합니다.
.hero {
text-align: center;
}
.fadeIn{
display: inline;
text-indent: 5px;
}
.fadeIn span{
animation: fadeEffect 12.5s linear infinite 0s;
-ms-animation: fadeEffect 12.5s linear infinite 0s;
-webkit-animation: fadeEffect 12.5s linear infinite 0s;
color: #7387a5;
opacity: 0;
/*overflow: hidden;*/
position: absolute;
}
.fadeIn span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(0px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(0px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(0px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(0px); }
80% { opacity: 0; }
100% { opacity: 0; }
}<section class="hero" id="hero">
<div class="container">
<div class="header-and-subheader">
<!-- <h1>Measure your mental health</h1> -->
<h1>You measure your
<div class="fadeIn">
<span>fitness</span>
<span>sleep</span>
<span>weight</span>
<span>steps</span>
<span>calories</span>
</div>
</h1>
<h1 id="header-response"><em>...why not your mind?</em></h1>
</div>
</div>
</section>코드 스 니펫은 여기에서도 찾을 수 있습니다 : https://jsfiddle.net/347qmpnw/2/ 아이디어가 있습니까?
추가 된 범위는 절대 위치입니다. 이는 실제 공간을 차지하지 않음을 의미합니다.
나는 당신이 단어를 겹치고 멋진 페이드 효과를주기 위해 이것을했지만 당신의 문제에 대한 이유이기도합니다.
단어의 평균 너비를 알고 있으면이를 "해킹"하고 H1에 오른쪽 여백으로 추가하여 강제로 "중심"으로 밀 수 있습니다. 여기에 표시된 단어에서 약 70px를 추가 할 수 있으며 올바르게 보일 것입니다.
그러나 내 생각에는 나타나는 단어에 따라 전체 제목이 움직이기를 원한다는 것입니다. 이 작업을 수행하는 일반 HTML / CSS 방법을 생각할 수 없습니다. 제대로 수행하려면 JS가 필요합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다