轨道滑块中的中心文本和按钮元素？

Question

我最难搞清楚如何在 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;
}

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

轨道滑块中的中心文本和按钮元素？

Center text and button elements within Orbit slider?

html

css

zurb-foundation