How are floated elements centered?

Question

The imgur link refers to what my layout presently looks like. I know I could use 'display: inline-block' as an alternative to center the child elements, however I want to accomplish this with the elements as floated.

Trying different things, it has occurred to me that I might need to place another div within the ' gallery ' to group the floats and shift it somehow using ' position: relative; ' and offset properties. What input for the value is a mystery though.

http://i.imgur.com/RlIuFmc.jpg

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebDev 101</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header class="siteHeader">
      <div class="contain">
        <a href="index.html" class="mainHeading">
          <h1>Creativity Hub</h1>
          <h2 class="subHeading">Professional Gallery of Digital Expressions</h2>
        </a>
        <nav class="siteNav">
          <ul class="linkTo">
            <li><a href="index.html">Main Set</a></li>
            <li><a href="porfolio.html">Porfolios</a></li>
            <li><a href="static.html">Static</a></li>
            <li><a href="print.html">Hand Craft</a></li>
            <li><a href="about.html">About</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="mainDisplay">
      <section class="displayContent cf">
        <h3 class="galleryTitle">2D Graphics</h3>
        <ul class="gallery">
          <li>
            <a href="img/img3.png">
              <img src="img/img3.png" alt="Image 1">
              <p>This is a description about the image or the author.</p>
            </a>
          </li>
          <li>
            <a href="img/img4.png">
              <img src="img/img4.png" alt="Image 1">
              <p>This is a description about the image or the author.</p>
            </a>
          </li>
          <li>
            <a href="img/img5.png">
              <img src="img/img5.png" alt="Image 1">
              <p>This is a description about the image or the author.</p>
            </a>
          </li>
        </ul>
      </section>
      <section class="displayContent cf">
      </section>
      <section class="displayContent cf">
      </section>
      <section class="displayContent cf">
      </section>
    </div>
  </body>
  </html>

a {
  text-decoration: none;
}
 img {
   display: block;
   max-width: 100%;
 }

.linkTo {
  list-style: none;
  padding: 0;
  margin: 0;
}

.linkTo,
.linkTo li {
  display: inline-block;
}

.contain {
  width: 70%;
  margin: auto;
  text-align: center;
}

.displayContent {
  width: 80%;
  border: 3px dashed red;
  margin: 0 auto 20px;
}

.galleryTitle {
  text-align: center;
}

.gallery {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gallery li {
  float: left;
  margin: 2.5%;
}

.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}

.cf:after {
    clear: both;
}

Answer 1 · 2016-04-20T21:00:54Z

April 20, 2016 9:00pm

Floats can be handy for some uses, but this isn't one of them. Good design means choosing the right tool for the job. Remember that floats are exceptions to the normal document flow, so making them behave can be tricky.

You're already aware that you can accomplish what you have in mind with blocks and margins.

Welcome to the Treehouse Community

Looking to learn something new?

Benjamin Hedgepeth

Benjamin Hedgepeth

How are floated elements centered?

1 Answer

Steven Parker

Steven Parker

My personal choice for what you want to do would be flexbox.

Benjamin Hedgepeth

Benjamin Hedgepeth