궤도 슬라이더의 가운데에 텍스트 및 단추 요소가 있습니까?

Question

두 개의 텍스트 요소를 만드는 방법과 버튼을 궤도의 궤도 중심에 배치하는 방법을 가장 많이 연구하고 있습니다. 그런 초보자 질문에 사과드립니다. 그러나 저는 재단에 새로운 브랜드이고 문법 중 일부는 저를 혼란스럽게합니다.

4 개의 이미지가있는 슬라이더이며 가운데에 h3, p 및 버튼 요소를 겹쳐서 표시하려고합니다. 현재 그들은 왼쪽으로 당겨집니다.

HTML :

<div class="row columns"> 
    <div class="orbit" id="featured" role="region" aria-label="Favorite Space Pictures" data-orbit> 
     <ul class="orbit-container" data-caption="#captionOne"> 
      <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button> 
      <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button> 
      <li class="orbit-slide is-active"> 
       <img src="images/manUChelseaAlt.jpg"> 
       <h3 class="blogTitle">Manchester United v. Chelsea</h3> 
       <p>My In-Depth Discovery On Two Of The Most Popular Teams</p> 
       <a href="#" class="alert button">Read More</a> 
      </li> 
      <li class="orbit-slide"> 
       <img src="images/bestPlayers.jpg"> 
       <h3 class="blogTitle">The Best Players in Fútbol</h3> 
       <p>I learn what makes these special players so unique.</p> 
       <a href="#" class="alert button">Read More</a> 
      </li> 
      <li class="orbit-slide"> 
       <img src="images/worldCup.jpg"> 
       <h3 class="blogTitle">The World Cup</h3> 
       <p>I figure out why this is the most-watched event in the world.</p> 
       <a href="#" class="alert button">Read More</a> 
      </li> 
      <li class="orbit-slide"> 
       <img src="images/manuStadium.jpg"> 
       <h3 class="blogTitle">The Basics of Fútbol</h3> 
       <p>I finally learn about the basics.</p> 
       <a href="#" class="alert button">Read More</a> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS :

#featured h3, 
#featured p, 
#featured .button { 
    position: absolute; 
    color: white; 
} 

#featured h3 { 
    top: 35%; 
    margin-left: 10%; 
} 

#featured p { 
    top: 50%; 
    margin-left: 10%; 
} 

#featured .button { 
    top: 65%; 
    margin-left: 10%; 
} 

.blogTitle { 
    font-family: 'Cormorant SC', serif; 
    font-size: 3em; 
    color: white; 
} 

Answer 1

변경 :

#featured h3, 
#featured p, 
#featured .button { 
    position: absolute; 
    color: white; 
} 

사람 :

#featured h3, 
#featured p, 
#featured .button { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    color: white; 
}