1
事前に私はHTMLとCSSに新しいので、私は3つの画像を中心にしたいので、私は得ることができるすべての助けていただければ幸いですが、でる。レイアウトが何であるかを見ることができるように画像を追加しました。図のフローティング画像をセンタリングする
body {
\t font-family: Arial, Verdana, sans-serif;
\t color: #000;
\t font-weight: bold;
\t margin: 0;
}
#wrapper {
\t width: 100%;
}
#logo {
\t float: left;
}
#navigation {
\t clear: both;
\t background-color: #14171a;
\t width: 100%;
\t height: 70px;
\t box-shadow: 0px 5px 3px #000;
}
#navigation ul li {
\t display: inline;
\t margin-left: 50px;
}
#navigation ul li a {
\t text-decoration: none;
\t color: #fff;
\t font-size: 20px;
}
#navigation ul {
\t width: 570px;
\t padding-top: 20px;
\t margin: 0px auto 0px auto;
}
#midcontent {
\t
}
h1 {
\t margin: 0px auto 0px auto;
\t margin-top: 50px;
\t padding: 10px 0px 10px 10px;
\t color: #fff;
\t background-color: #6ac045;
\t font-size: 170%;
\t
\t border-radius: 8px;
\t width: 400px;
}
#midcontent article {
\t }
figure {
\t float: left;
\t width: 300px;
\t
\t
}
figure img {
\t display: inline-block;
\t width: 300px;
\t height: 244px;
}
figcaption {
\t text-align: center;
}<!DOCTYPE html>
<html>
<head>
\t <title>Electronix CR</title>
\t <link rel="stylesheet" type="text/css" href="CSS/Electronix.css">
</head>
\t <body>
\t \t <div id="wrapper">
\t \t \t <header id="logo">
\t \t \t \t <img src="images/Electronix.png">
\t \t \t </header>
\t \t \t <nav id="navigation">
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="#">Home</a></li>
\t \t \t \t \t <li><a href="#">About</a></li>
\t \t \t \t \t <li><a href="#">Services</a></li>
\t \t \t \t \t <li><a href="#">Contact</a></li>
\t \t \t \t </ul>
\t \t \t </nav>
\t \t \t <h1>What can we fix for you today</h1>
\t \t \t <section id="midcontent">
\t \t \t \t <article class="content">
\t \t \t \t \t <figure><img src="images/Diagnostic.jpg" alt="Helianthus" />
\t \t \t \t \t <figcaption>Siagnostic</figcaption>
\t \t \t \t </figure>
\t \t \t \t <figure><img src="images/LCD.jpg" alt="Passiflora" />
\t \t \t \t \t <figcaption>LCD Replacement</figcaption>
\t \t \t \t </figure>
\t \t \t \t <figure><img src="images/Battery.jpg" alt="Nyctocalos" />
\t \t \t \t \t <figcaption>Battery Replacement</figcaption>
\t \t \t \t </figure>
\t \t \t \t </article>
\t \t \t </section>
\t \t \t
\t \t </div>
\t </body>
</html>
[別のdiv内の浮動divをセンタリング]の可能複製（http://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div）または[どのように私は中央ありません浮動小数点要素？]（http://stackoverflow.com/q/4767971/5743988） – 4castle