Text not aligning!

1

Hello,

I am working on my Portfolio page (below):

I had tried to align the text “Front-End Developer, based in London” and “Portfolio” to the center using “text-align” but for some reason that I do not understand, it remains aligned to the left.

Please help, really appreciate any help I can get.

Regards,
Ope

2

Hi Ope,

It seems that the problem is created by

.part2 h1 {
    ...
    display: table-cell;
}

If you remove that line the text will get center-aligned.

3

Hi Opsydoo,

For “Front-End Developer, based in London” :

Looks like

.part2 h1 {
…
display: table-cell;
…

}

is preventing h1 from centering. Once I remove “display: table-cell”, text gets centered.

For “Portfolio based in London”

When I add margin:auto to part4

.part4 {
height: 0px;
width: 10%;
margin:auto;
}

text gets centered.

I hope this helps!

4

Thank you both so much, really appreciate it.

5

If you want to keep the display as is, you can use the “<center>” html balise to force center an element regardless of the display. :slight_smile: Just nest the element you want to center inside a “<center></center>”

6

<center> is “entirely obsolete, and must not be used by authors” - HTML5.
CanIUse - center

2 Likes
7

The problem with using the <center> tag is that you’re using HTML instead of CSS to style something. The <center> tag provides no semantics - it doesn’t tell us if the element is block level or if it’s a header or anything. That’s why it’s no longer used. Similarly, <bold> and <italics> are discouraged, being replaced by <strong> and <em> which provide a better sense of the nature of the content within the tags, with corresponding styles set in the CSS.

2 Likes
8

I didn’t know that, thank you !

9

Well, converting <b> and <i> to <strong> and <em> tags is not really semantically correct either.

<i> tag is meant for content that has a different mood from the context, but not really emphasis. For instance, you might want to run italics on words that are taken from another language (most commonly expressions from Latin), which doesn’t carry an emphasis , so <em> would be semantically wrong. In that case it’s recommended to use a lang attribute to the <i> element.
Same thing for a technical term, taxonomy, or any part of a text that normally gets italicized to show a change on the flow, for instance, separate the dialog between characters from the narrator.

It’s also common to use italics on the attribution for a quote, which should be coded as <cite> tags for <q> elements.

Same thing for <b> and <strong>. Sometimes you just want to make text bold without indicating extra “weight” to it.

So rule of thumb: know your text-level semantics, and use <i> and <b> when you want to make something italicized or bold by a semantic reason not covered by other tags.

Now going back to the OP, you might want to check flexbox :wink: