I am trying to align the text in the “Tweet Wisdom” and “More Wisdom” elements at the bottom of this quote generator Codepen.
Here’s my html:
<div id="wrapper">
<div id="quote-box">
<div id="title">
<span id="text'">Bojack Quote Generator</span>
</div>
<div class="quote-text">
"<span id="text">Quote</span>"
</div>
<div class="quote-author">
- <span id="author">Author</span>
</div>
<div class="buttons">
<a class="button" id="tweet-quote" title="Tweet this quote!" target="_blank">
Tweet Wisdom
</a>
<button class="button" id="new-quote">More Wisdom</button>
</div>
</div>
And the relevant CSS:
.buttons {
width:450px;
margin:1em;
display:block;
font-family: 'Tangerine';
} .button {
height:38px;
width: 100px;
border:none;
border-radius:3px;
color:#fff;
background-color:#333;
outline:none;
margin-top:30px;
opacity:1;
cursor:pointer;
} #tweet-quote {
float:left;
text-align:right;
font-size:1.2em;
align-items: center;
display: inline-flex;
vertical-align:middle;
}
#new-quote {
float:right;
font-size:1.2em;
font-family: 'Tangerine';
text-align:right;
display:inline-flex;
vertical-align:middle;
}
}
I’ve noticed some odd behavior even though both the anchor and the button elements are id’d as “button.” Specifically, the (right) button won’t inherit the font unless I declare it again. And neither inherited anything until I closed the bracket for the buttons div before specifying .button style.
Anyway, right now both of the texts should be right-aligned but they buttress the left edge of the visual element.
Suggestions? Thanks in advance.
(Incidentally, I’m also working on reducing the opacity of the background image and maybe scaling it, so advice there is appreciated, but I think I may have found some good sources. It’s this text horizontal alignment issue that’s eluding me.
