Centering Floated images in figure

Question

in advance i appreciate all help i can get since im new to HTML and CSS, i want to center the 3 images, but i cant center them, im sure its something silly but i cant figure it out. i added an image so you can see what the layout is.

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>

Possible duplicate of [Centering floating divs within another div](http://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div) or [How do I center float elements?](http://stackoverflow.com/q/4767971/5743988) — 4castle, Apr 27 '16 at 03:27

Antheidan · Answer 1 · 2016-04-27T03:56:48.097

0

have you attempted to remedy the issue using the BootStrap framework? Using the grid you will be able to place the images in columns and rows based on the size you desire. BootStrap works in a grid of 12. So you would require something along the lines of

    <div class = row>
    <div class = col-md-4>
    <insert image here or content here>
    </div>
    </div>

You may also need to add this to your images:

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

essentially you would repeat the process as needed. each image with "col-md-4" as 4*3=12. It may require additional adjustments, but bootstrap will do almost all the heavy lifting. Below is a link to BootStrap and it's documentation. Good luck friend.

http://getbootstrap.com/

edited Apr 27 '16 at 03:56

answered Apr 27 '16 at 03:50

Antheidan

3
4

Thank you for your response, i know bootstrap is an easy solution, how ever i wish to learn how to fix this issue instead of using a framework that resolves all my problems, after all learning is the path to knowledge – Sidney Vogel Apr 27 '16 at 03:54
I understand in that case, perhaps attempt to manually adjust the alignment via margin left or margin right. – Antheidan Apr 27 '16 at 04:02
if i manually adjust the content, when whaching the page on a smaller screen the centered content is not centered anymore. – Sidney Vogel Apr 27 '16 at 04:29

Centering Floated images in figure

1 Answers1