Hello I'm having trouble centering my ul list to my title and main image using css. If you run the code the ul list is a bit to the left of the centered image and title. Also if I type in text-align: center; to the ul list it looks unorganized and the bullets aren't aligned to the left. Here is the code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>McDonalds Tribute Page</title>
<link rel="stylesheet" type="text/css" href="tribute.css">
</head>
<body>
<div id="main">
<header id="title">
<h1>
McDonalds Tribute Page
</h1>
</header>
<div id="main-image">
<!-- <img src="https://i.imgur.com/2YsKZFI.png" alt="McDonalds Golden Arches" /> -->
</div>
<div id="tribute-info">
<body>
<h3 class="color-text">A timeline of all things McDonalds</h3>
<ul id=list-info>
<li>
<strong>1953</strong> - McDonalds opens first franchise in Phoenix
</li>
<li>
<strong>1954</strong> - Ray Kroc approaches McDonald Brothers about opening first franchise outside of CA and AZ
</li>
<li>
<strong>1958</strong> - McDonalds has sold 100 million burgers
</li>
<li>
<strong>1958</strong> - McDonalds spreads to the East Coast
</li>
<li>
<strong>1961</strong> - McDonald Brothers sold business rights to Ray Kroc for $2.7 million
</li>
<li>
<strong>1963</strong> - 1 Billion burgers sold
</li>
<li>
<strong>1968</strong> - The Big Mac was introduced to McDonalds
</li>
<li>
<strong>1980</strong> - Chicken McNuggets are introduced
</li>
<li>
<strong>2015</strong> - All day breakfast introduced
</li>
</ul>
</body>
</div>
<!-- <div class="img-gallery">
<section>
<img src="https://i.imgur.com/2IkFLba.jpg" alt="big mac" />
<img src="https://i.imgur.com/EZ58bYY.jpg" alt="chicken nugget" />
<img src="https://i.imgur.com/EC9zcIT.png" alt="filet o fish" />
<img src="https://i.imgur.com/17piAkN.jpg" alt="McFlurry" />
<img src="https://i.imgur.com/hUog2df.jpg" alt="burger king" />
<img src="https://i.imgur.com/WiDJfLM.jpg" alt="mcdonalds logo" />
</section>
</div> -->
<body>
</body>
</div>
</body>
</html>
and my css
#main {
display: grid;
}
#title {
text-align: center;
}
#main-image {
display: block;
margin-left: auto;
margin-right: auto;
}
#tribute-info {
margin-left: auto;
margin-right: auto;
}
I can't post images so I commented out the picture
Aucun commentaire:
Enregistrer un commentaire