заранее. Я ценю любую помощь, которую могу получить, так как я новичок в HTML и CSS, я хочу центрировать 3 изображения, но я не могу их центрировать, я уверен, что это что-то глупое, но я не могу понять это. Я добавил изображение, чтобы вы могли видеть, что это за макет.
body {
font-family: Arial, Verdana, sans-serif;
color: #000;
font-weight: bold;
margin: 0;
}
#wrapper {
width: 100%;
}
#logo {
float: left;
}
#navigation {
clear: both;
background-color: #14171a;
width: 100%;
height: 70px;
box-shadow: 0px 5px 3px #000;
}
#navigation ul li {
display: inline;
margin-left: 50px;
}
#navigation ul li a {
text-decoration: none;
color: #fff;
font-size: 20px;
}
#navigation ul {
width: 570px;
padding-top: 20px;
margin: 0px auto 0px auto;
}
#midcontent {
}
h1 {
margin: 0px auto 0px auto;
margin-top: 50px;
padding: 10px 0px 10px 10px;
color: #fff;
background-color: #6ac045;
font-size: 170%;
border-radius: 8px;
width: 400px;
}
#midcontent article {
}
figure {
float: left;
width: 300px;
}
figure img {
display: inline-block;
width: 300px;
height: 244px;
}
figcaption {
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title>Electronix CR</title>
<link rel="stylesheet" type="text/css" href="CSS/Electronix.css">
</head>
<body>
<div id="wrapper">
<header id="logo">
<img src="images/Electronix.png">
</header>
<nav id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1>What can we fix for you today</h1>
<section id="midcontent">
<article class="content">
<figure><img src="images/Diagnostic.jpg" alt="Helianthus" />
<figcaption>Siagnostic</figcaption>
</figure>
<figure><img src="images/LCD.jpg" alt="Passiflora" />
<figcaption>LCD Replacement</figcaption>
</figure>
<figure><img src="images/Battery.jpg" alt="Nyctocalos" />
<figcaption>Battery Replacement</figcaption>
</figure>
</article>
</section>
</div>
</body>
</html>