phillip swag phillip swag - 1 month ago 6
HTML Question

Why are my links not u being centered under my image?

Anyone can tell me why my links aren't being centered under my image? The center tag worked for my image but not for the links any clue why? This is messing me up a bit.

<!DOCTYPE html>
<html>



<head>


<title>PEllisFitness</title>

<link href="feel.css" rel="stylesheet" type="text/css" />

</head>



<body background="wayback.jpg">
<header>
<center><img src="Fitness Logo.jpg" alt="Fitness Logo" align="middle" style="border:5px solid black"/></center>

</header>

<center>
<nav>
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="Diet.html">Diet Plans</a></li>
<li><a href="Mass.html">Mass Guide</a></li>
<li><a href="Cutting.html">Cuttin Guide</a></li>
<li><a href="About.html">About Me</a></li>
<li><a href="Contact.html">Contact Info</a></li>
</ul>
</nav>

</center>

</body>

</html>

Answer

You should be using CSS for this.
The <center> tag is deprecated.
At the moment, you are centering the whole list, not the list items, which may cause the issue. So if you want your links centered, you need to wrap every single <li> inside a <center>. Hope, this helps.

A better solution would be, to add CSS to the <ul>. Change it to

<ul style="display: flex; flex-direction: column; align-items: center;">

This will make the list a CSS-Flexbox with the child elements displayed in a column and centered.

Comments