HTML align items and font color

Question

<!DOCTYPE html>
<html>
<head>
<style>
div.div1  {
    align-items: center;
    border-style: solid;
    border: 1px solid red;
    display: flex;
}
</style>
</head>
<body>

<div class="div1">
    <img src="smiley.gif">
    One<br>Two<br>Three<br><font color="red">Four</font>
</div>

</body>
</html>

I use the above code to display an image and the text One, Two, Three, Four next to it. I am trying to make Four have a red color but it places it seperately from the other numbers, to the left. How can I fix this?

@j08691 But it does, and that's the problem. If browsers had any sense, they would invalidate code like that. But no, they keep supporting all that old stuff. — Mr Lister
– Mr Lister, Commented Jun 11, 2017 at 19:10
@MrLister No it doesn't: developers.whatwg.org/obsolete.html#obsolete but I think your point is only that browsers still support it. That said, they can drop support for it tomorrow without notice and if it broke anyone's web page it wouldn't be anyone's fault but that web developer who decided to use <font>. Browsers support <marquee>, too, but that has never been part of any HTML specification. — Rob
– Rob, Commented Jun 11, 2017 at 19:12
@JaredFarrish No. I said if their page breaks cause they used <font> and browsers quit supporting it, which they will do one day. — Rob
– Rob, Commented Jun 11, 2017 at 19:17

Alessi 42 · Accepted Answer · 2017-06-12 07:55:38Z

3

First of all I would advise against using a font element with inline CSS as the font element is now obsolete, instead use a span with the class red which you can then style using CSS.

Secondly wrapping all of the text in a div will keep them aligned.

Example:

div.div1 {
  align-items: center;
  border-style: solid;
  border: 1px solid red;
  display: flex;
}

.red {
  color: red;
}

<div class="div1">
  <img src="https://www.w3schools.com/tags/smiley.gif">
  <div>
    One
    <br> 
    Two
    <br> 
    Three
    <br>
    <span class="red">Four</span>
  </div>
</div>

Hope this helps!

edited Jun 12, 2017 at 7:55

answered Jun 11, 2017 at 19:08

Alessi 42

1,1921 gold badge12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Asons Over a year ago

Users that use font doesn't now why to not use, so to add that along with your advice would be great

Alessi 42 Over a year ago

Thank you, I should have now edited the post to add this.

Gal Ratzkin · Accepted Answer · 2017-06-12 23:30:05Z

1

Just wrap the whole statement in another tag like so :

    <p>One<br>Two<br>Three<br><span style="color:red">Four</span></p>

BTW - I dicourage style attributes in favor of a proper css file but just for demonstration's sake ...

This happens because when you use flex in the styling Each in-flow child of the container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.

edited Jun 12, 2017 at 23:30

answered Jun 11, 2017 at 19:09

Gal Ratzkin

1512 silver badges8 bronze badges

1 Comment

Jared Farrish Over a year ago

This works, but please remove the font tag in favor of a span or some valid alternative.

Collectives™ on Stack Overflow

HTML align items and font color

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related