J. Jackson J. Jackson - 4 months ago 17
HTML Question

Center text and button elements within Orbit slider?

I am having the hardest time figuring out how to make two text elements and a button centered within the Orbit slider in Foundation. I apologize for such a beginner question, but I am brand new to Foundation and some of the syntax is confusing me.

It is a slider with four images, and I'm trying to superimpose the centered h3, p and button elements over the top. Currently they are pulled to the left.

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

Change:

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

To:

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