我很难确定如何制作两个文本元素和一个位于Foundation中Orbit滑块中心的按钮。对于这个初学者的问题,我深表歉意,但是我是Foundation的新手,有些语法使我感到困惑。

它是一个带有四个图像的滑块,我正在尝试将居中的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;
}

最佳答案

更改:

#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;
}

10-05 20:43
查看更多