html - CSS Centering floating divs -

this centering div problem never go away! need help... reason never managed center multiple floating divs, whole internet having answer..!! (am problem?)

     .middle {         margin-top: 40px;         border-radius: 10px;         width: 100%;         background: #ffffff;         bordder-radius: 10px;         border: thin solid #777;         box-shadow: 0 0 10px #888;         padding: 5px 10px;         text-align: center;         overflow: hidden;         display: inline-block;         text-align: center;       }       .vidtyp {         float: left;         padding: 5px;         margin: 30px 30px;         border: thin solid #bbb;         border-radius: 10px;         display: inline-block;         box-shadow: 0 0 1px #000;       }       .vidtyp img {         width: 250px;         height: 250px;       }       .vidtyp:after {         clear: both;         content: "";         display: table;       }

<div class="middle">    <br>      <div class="vidtyp">      <img src="">1      <br>movies</div>    <div class="vidtyp">      <img src="">2      <br>series</div>    <div class="vidtyp">      <img src="">3      <br>anime</div>    <div class="vidtyp">      <img src="">4      <br>fun</div>    <div class="vidtyp">      <img src="">5      <br>fun</div>      <br>    <br>  </div>

can please point problem here? tried , im on verge of quitting css , going tables. managed center 1 div, never many floating... every website visit says same thing.. yet never made it.

help please!

if remove float: left; .vidtype center themselves.

.middle  {      margin-top:40px;      border-radius:10px;      width:100%;      background:#ffffff;      border-radius: 10px;      border: thin solid #777;      box-shadow: 0 0 10px #888;      padding: 5px 10px;      text-align: center;      overflow: hidden;      display: inline-block;      text-align: center;  }  .vidtyp  {      padding:5px;      margin: 30px 30px;      border: thin solid #bbb;      border-radius:10px;      display:inline-block;      box-shadow: 0 0 1px #000;  }  .vidtyp img  {      width:250px;      height:250px;  }  .vidtyp:after {      clear: both;      content: "";      display: table;  }

 <div class="middle">       <div class="vidtyp">           <img src="http://placehold.it/200x200" alt="" />           <p>movies</p>       </div>       <div class="vidtyp">           <img src="http://placehold.it/200x200" alt="" />           <p>series</p>       </div>       <div class="vidtyp">           <img src="http://placehold.it/200x200" alt="" />           <p>anime</p>       </div>       <div class="vidtyp">           <img src="http://placehold.it/200x200" alt="" />           <p>fun</p>       </div>       <div class="vidtyp">           <img src="http://placehold.it/200x200" alt="" />           <p>fun</p>       </div>  </div>

---

also have errors in code i've fixed.

1. <img> tags must include closing / , alt="" attribute, <img src="pathtoimage.jpg" alt="" />.

   if you're not if html correct, can run through w3c validation service check , see.

2. don't use <br> create new line, instead wrap contents in block element, such <p> or <div>. block elements automatically displayed on new line.

3. bordder-radius:10px; misspelled css attribute , not valid. should border-radius:10px;

4. lastly, sure indent , format code correctly, makes easier , others work with. pretty , clean code should aim if you're planning on asking others it.

demo: http://jsfiddle.net/9my9lbon/2/