Div or Span to center text

[asasass]

Which would you use, and why?

https://jsfiddle.net/20998tdo/92/

.text {
  display: block;
  font-family: Tahoma;
  font-weight: bold;
  font-size: 30px;
  color: #0059dd;
  line-height: 100px;
  text-align: center;
}

<span class="text">Links</span>

https://jsfiddle.net/20998tdo/90/

.text {
  font-family: Tahoma;
  font-weight: bold;
  font-size: 30px;
  color: #0059dd;
  line-height: 100px;
  text-align: center;
}

<div class="text">Links</div>

[TechnoBear]

Firstly, neither <div> nor <span> centres the text. That is done by the applied CSS rules.

Using a <span>, which is an inline element, then adding display: block; is just silly here. Use a block level element.

Personally, I wouldn't use either <span> or <div>, as both are generic containers with no semantic meaning. It's difficult to say what I would use, as I have no understanding of your structure or how it's intended to function. As it stands, the links serve no purpose. I would probably use either a paragraph - <p> - or a heading tag - <h1> to <h6>, depending on what else is on that page.

<span>

<div>: The Content Division element

<p>: The Paragraph element

<h1>–<h6>: The HTML Section Heading elements

[asasass]

text-align: center;

centers the text

[TechnoBear]

text-align: center;

centers the text

Sorry - I'm missing the point of that comment. That is a CSS rule, as I said.

[asasass]

For text-align to work, it must be used on a block level element.

[asasass]

p works, but line height isn't accurate
https://jsfiddle.net/20998tdo/98/

Compared with:
https://jsfiddle.net/20998tdo/90/

and this one:
https://jsfiddle.net/20998tdo/92/

[asasass]

And according to this, line-height is used with a div, not p.
https://www.w3schools.com/cssref/playit.asp?filename=playcss_line-height

[TechnoBear]

p works, but line height isn't accurate

Use developer tools to look at the two versions and see what is different in the version using <p>. Once you spot that, you can adjust your rule accordingly.

And according to this, line-height is used with a div, not p.

Then it's wrong.

line-height | Codrops CSS Reference

[asasass]

I got it here:
https://jsfiddle.net/20998tdo/102/

p {
  font-family: Tahoma;
  font-weight: bold;
  font-size: 30px;
  color: #0059dd;
  line-height: 40px;
  text-align: center;
}

<p>Links</p>

[TechnoBear]

That gives you the result you want, but you didn't use developer tools to see why there was a difference using the <p> tag, and you've therefore missed an opportunity to learn something useful.

The difference in display was not due to the line-height, although adjusting that has compensated for the difference here. That approach would not work with multiple lines of text.

[TechnoBear]

You should also be aware that by failing to find and address the actual reason for the change, you've left yourself relying on a "magic number" solution, which may not display the same way in all browsers.

[Ray.H]

line-height was just simply used on a div in that example

Which is valid, because the line-height property inherits from the parent element and applies to all elements

No where does it say ..."line-height is used with a div, not p"

When you learn to consult with the real specs you will get the real answers

line-height - CSS | MDN

* Initial value    - normal
* Applies to       - all elements. It also applies to ::first-letter and ::first-line.
* Inherited	   - yes
* Percentages	   - refer to the font size of the element itself
* Media	           - visual
* Computed value   - for percentage and length values, the absolute length, otherwise as specified
* Animation type   - either number or length
* Canonical order  - the unique non-ambiguous order defined by the formal grammar

[asasass]

Measuring the line-height comes out to 40px, but why does div give you a different number?

How come line-height for p
40px;

https://jsfiddle.net/vqtxmoqt/15/

is different from line height from div
line-height: 100px;

https://jsfiddle.net/vqtxmoqt/16/

[SamA74]

The <p> element has default margins top and bottom, <div> does not, line-height is exactly the same.
But the point is, any default browser setting can be overridden with whatever you like via css.
Choose an element according to what is most semantically correct, not by how it looks by default. You can always change how it looks with css.

[system]

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.