I hope all is well. I'm presently practicing building an HTML email using the Foundation for Emails framework by Zurb. I can't seem to center a certain span element. I designed it to look like a button using SCCS. I figure if this span can't be centered, then an actual button or form / input combo element would present as slightly more difficult to maneuver.
Here's a snippet of the image output. As you can see, I managed to center the other span elements, but notice the "See Deal" element is slightly out of alignment with the rest of the image. When I inspect the element, for some reason it's not lined up within the box like the rest of them.
Been working on this for about a day and I can't seem to get it figured out. Any and all insight is always most welcomed and appreciated.
Here's my HTML portion of the code:
<container class="other-deals-container">
<row class="other-deals">
<columns>
<row class="offer">
<columns>
<img src="{{root}}/assets/img/kayak-images/cancun.png">
<p>Cancun: 4 nights with air and Melody Maker Cancun stay. Price reflects MIA departure, other cities available.</p>
<span class="save_amount">Save up to 65%</span>
<span class="tiny_info">CheapCaribbean.com</span>
<span class="price">$689+</span>
<center>
<span class="button">See Deal</span>
</center>
</columns>
</row>
</columns>
</row>
</container>Here's the CSS / SCSS portion of the Code:
.other-deals {
background: #f1f4f7;
background-color: #f1f4f7;
.offer {
background: #ffffff;
background-color: #ffffff;
.columns {
th {
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 20px;
}
& > table {
table-layout: fixed;
}
}
}
img {
padding-bottom: 20px;
}
p {
color: black;
font-weight: 600;
font-size: 16px;
text-align: center;
padding-bottom: 20px;
}
span {
color: black;
font-weight: 600;
font-size: 16px;
text-align: center;
display: block;
&.save_amount {
font-size: 14px;
color: #1d93f5;
}
&.tiny_info {
font-size: 10px;
font-weight: 300;
padding-bottom: 10px;
}
&.price {
font-size: 20px;
font-weight: 600;
padding-bottom: 10px;
}
&.button {
display: inline-block;
width: 100px;
text-align: center;
background-color: black;
color: white;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 40px;
padding-right: 40px;
border-radius: 5px;
}
}
}
I found the solution to my issue. I had to step away (always a good tactic).
To remove the button, I removed the tags and placed contents into a span element nested into a link element. That seemed to have done the trick. Thanks to everyone that read this post.