CODEWITHSUNDEEP
htmlcssflexbox
Travis Lukas Porter Batista
Travis Lukas Porter Batista

Reputation: 67

Applying styles to a <span> inside a "display:flex"

I am having an issue where I would like to underline text, and/or add additional styles to a or any other element really inside a flex container. I am having issues: Centering not working the way I want it to work. Adding a span makes a mess. Please read the notes in the code. How do I add additional styles and keep the flex and not make a mess?

#first
{
    height: 527px;
    background: url(img/gbackground.jpg) no-repeat;
    background-size: cover;
    justify-content: center;
    align-items: center;
    display: flex;
    font: normal normal 30px/50px Times, serif;
}
<!-- I want to put a span around "View Our Services, but it ruins the flexbox,
I want the "View Our services" centered below the top 3 words: "Your Business Online" 
and with some space
on the left, I added some whitespace as a ghetto hack, but how can I add spans
so I can do extra cool things and not disrupt the flex? I also tried adding
a underline to the "-->
<div id="first" class="col">Your Business Online </br> &nbsp;&nbsp;View Our Services</div>

<!-- WTF? -->
<div id="first" class="col">Your Business Online </br> &nbsp;&nbsp;<span id="space">View Our Services</span></div>
?

Upvotes: 1

Views: 6668

Answers (2)

Gerard
Gerard

Reputation: 15786

Please see below. I documented the changes in the source code.

#first
{
height: 527px;
background: url(img/gbackground.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column; /* change from row (default) */
font: normal normal 30px/50px Times, serif;
}
<!-- Put a span around 'Your Business Online' also. Remove line break and
non-breaking spaces -->
<div id="first" class="col"><span>Your Business Online</span><span id="space">View Our Services</span></div>

Upvotes: 0

Abhishek Kumar
Abhishek Kumar

Reputation: 2539

Provide flex-direction: column to the container.

Changes in Markup :

  • Made .first class instead of id for container.
  • Removed the break line tag from the second container.

See, if it helps.

.first
{
height: 527px;
background: url(img/gbackground.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
font: normal normal 30px/50px Times, serif;
flex-direction: column;
}
<!-- I want to put a span around "View Our Services, but it ruins the flexbox,
I want the "View Our services" centered below the top 3 words: "Your Business Online" 
and with some space
on the left, I added some whitespace as a ghetto hack, but how can I add spans
so I can do extra cool things and not disrupt the flex? I also tried adding
a underline to the "-->
<div class="first" class="col">Your Business Online </br> &nbsp;&nbsp;View Our Services</div>

<!-- WTF? -->
<div class="first" class="col">Your Business Online  &nbsp;&nbsp;<span id="space">View Our Services</span></div>

Upvotes: 2

Related Questions