I can't figure out how to center this subtitle

I can't figure out how to center this subtitle
0.0 0

#1

I keep trying different variations of

margin-left: auto;
  margin-right: auto;
  width: 80%;

and text-align: center; but I can’t seem to get the subtitle to move away from the left side of the screen. Could anyone point me in the right direction? Here is the CodePen: https://codepen.io/Jlemien/pen/QmrQjx?editors=1100


#2

Try selector “header section div”, not “header section div subtitle”


#3

try adding display:block to
header section div subtitle


#4

My suggestion, instead of <subtitle> use <p>

If you want to use <subtitle> you can center text with this:

    justify-content: center;
    align-items: center;
    display: flex;

or you can select div where your <subtitle> is.
and center text with: text-align: center;

Don’t use <subtitle> :stuck_out_tongue:


#5

Where you see this <subtitle></subtitle> from? it’s not a valid HTML element.

To center block element use margin auto.
To center inline or inline-block element use text-align center on the parent html.

I see <subtitle> HTML element is inline, so you need to add text-align center on the <div> wrapping it.

But again, is not a valid HTML element. You would want to change it to

as it is the designated way to define text element, and probably have all default the text styling it meant to have.


#6

Thanks very much for your answers everyone! Now I understand. :slight_smile: