1
im Voraus ich schätze alle Hilfe, die ich bekommen kann, seit ich neu zu HTML und CSS, ich möchte die 3 Bilder zentrieren, aber ich kann sie nicht zentrieren, ich bin sicher, es ist etwas albern, aber ich kann es nicht aus. Ich habe ein Bild hinzugefügt, damit Sie sehen können, was das Layout ist. Centering Floated Bilder in Abbildung
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>
Mögliche Duplikat [Zentrieren Floating divs innerhalb eines anderen div] (http://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div) oder [Wie kann ich Zentrieren float elements?] (http://stackoverflow.com/q/4767971/5743988) – 4castle