Question

我正在努力弄清楚如何在Foundation中的Orbit滑块中制作两个文本元素和一个按钮。我为这样一个初学者问题道歉，但我对基金会来说是全新的，有些语法令我感到困惑。

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

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

1 个答案: