I’m trying to have .text, square1, and text2 all line up horizontally, next to each other on a single line. Currently they are on the same line, but aren’t side by side, they are bunched together at the beginning of the line. Here’s the code:
Not really sure what you are trying but you had a missing class selector on text2 and the display:block in .animation span would over-ride the inline-block due to specificity.
As @SamA74 said the block display in the parent rule needed to be removed as it was not overridden by the later rules because they had lower specificity.
The parent rule also give them the opacity of zero, so they aren’t even visible.
Is your posted code the same as the now tested code?
Any additional help with getting the ‘text’, ‘square1’, ‘text2’ side by side, on the same line instead of bunched together at the beginning of the line, is appreciated.
Much thanks again,
I’m not really trying to “get the boxes aligned in the center of the line”, but to spread out the ‘text’ ‘square2’ ‘text2’ spans, horizontally next to each other, right now they are all scrambled together at the begining of the line.
However, no change in regard to the text-align suggestion.
Any other ideas are welcomed.
thanks again
OK, to finally solv this issue is your code made to work as you requested in two versions with similar display. They are examples of what your code seems to be aimed at, either flexbox or inline context.
Thanks for your replies.
Yes, “‘this’ on the left and ‘that’ on the far right and the square in the middle”.
And thanks for this code. I have tested this:
<!DOCTYPE html><html><head><meta charset="utf-8">
<title>Untitled</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.animation-box {
min-height: 4.5rem;
margin: 175px auto 0;
display: flex; /* added to make it a flexbox container */
justify-content: center; /* added for horizontal alignment */
align-items: center; /* vertical alignment */
width: 100%;
overflow: hidden;
}
.animation-box span {
margin: 0 0.15em;
display: inline-block;
/* vertical-align: middle; *//* not effective in flexbox */
/* border: 1px dashed black;*/ /* added for clarity */
opacity: 0; /* this apparently keeps it hidden until the animation begins */
animation: leftFadeInOut 18.5s ease 2.75s forwards;
}
.text {
font-size: 30px;
color: #000;
}
.square1 {
width: 1.75vw;
height: 1.75vw;
background-color: #ccc;
}
.text2 {
font-size: 30px;
color: #fff;
}
</style>
</head><body>
<section class="animation-box">
<span class="text">THIS</span>
<span class="square1"></span>
<span class="text2">THAT</span><br>
</section>
</body></html>
And it works well, thanks, which means it displays THIS on the left and THAT on the right, however ‘square1’ isn’t a square. Instead of being a square, the entire horizontal span shows #ccc, as the background color (as if the square is the full width of the anmination span). Any ideas on changing that where square1 is a #ccc square the size of W1.75vx by H1.75vw?
and it works, but I thought their might be a better way, via code instead on jpg. If this is the only solution, then I was going to look for some guidance with shrinking that image for mobile view:
@media only screen and (max-width: 720px)
{
etc...
