How do center my links?

Question

I can center "Edward" but "Email" and "instagram" won't.
https://code.sololearn.com/W1IVyY5SkvB6/?ref=app

Answer 1

@Nomeh He is creating a title/nav bar, so that is the only things he needs centered at the moment. He is utilizing classes, whereas that is going to imply that all DIVs on the document should be centered.

Answer 2

You could set the margin of your Instagram link so that it gets to the center of your page :

.pagelinks {
display: flex;
margin-left: 100px; // can be modified accordingly.
}
/* Setting the margin comes in handy most of the times. This is an alternative way of alignment */

Answer 3

@Edwards :
Try this! Maybe this is what you need??
Use flex instead of inline as the display value.

.pagelinks {
display:flex;
margin-left: 100px;
}

Answer 4

.pagelinks{
text-align:center;
}

https://code.sololearn.com/W1Nls1pDhlTI/#css

^Your code updated.

Answer 5

@Edwards Margins are great when you're dealing with a bunch of divs/nested divs, in which case you'll find yourself using 'margin: 0 auto;' a lot to deal with aligning them. (Don't forget the width of your div in that situation if it's nested)

Anyways, if you go about this particular problem with margins, you're going to run into alignment issues you don't want, for example 100px is simply shifting it over 100 pixels, which isn't necessarily the center. Resize your browser and you'll see what I mean.

Answer 6

insert this code at the end of your css code
______
div {
text-align: center;
}

or better

.pagelinks{
text-align: center ;
}

Answer 7

How do I get all the text in the middle of the screen as the vertical-align: middle also doesn't seem to work for me.

https://code.sololearn.com/W1Nls1pDhlTI/?ref=app

Answer 8

Thanks guys but now "Email" and "Instagram" are displayed on a different line when I want them on the same.

why is this?

Answer 9

@netkos thanks