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/


Comments

Post a Comment

Popular posts from this blog

ruby on rails - RuntimeError: Circular dependency detected while autoloading constant - ActiveAdmin.register Role -

-
i using activeadmin , have file doing this: activeadmin.register role something--- end however, server gives me error: runtimeerror: circular dependency detected while autoloading constant role /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:461:in `load_missing_constant' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:184:in `const_missing' ~/desktop/boxfox/app/admin/role.rb:1:in `<top (required)>' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:424:in `load' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:424:in `block in load_file' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:616:in `new_constants_in' /library/ruby/gems/2.0.0/gems/activesupport-4.0.10/lib/active_support/dependencies.rb:423:in `load_file' /library/ruby/gems/2.0.0/gems/activesuppor...
Read more

c++ - OpenMP unpredictable overhead -

-
i have simple openmp code runs 4 empty threads , reports time: #include "omp.h" #include <sys/time.h> #include <cstdio> double start_time; void process_thread() { } int main(){ struct timeval tv; gettimeofday(&tv, null); start_time = 1000*((double)tv.tv_sec + 1e-6*(double)tv.tv_usec); printf("beginning time: %.3fms ",start_time-start_time); #pragma omp parallel schedule(static,1) for(int i=0;i<4;i++) process_thread(); gettimeofday(&tv, null); double cur_time = 1000*((double)tv.tv_sec + 1e-6*(double)tv.tv_usec); printf("finishing time: %.3fms\n\n",cur_time-start_time); } without openmp running time small , consistent: beginning time: 0.000ms finishing time: 0.050ms beginning time: 0.000ms finishing time: 0.050ms beginning time: 0.000ms finishing time: 0.049ms beginning time: 0.000ms finishing time: 0.049ms beginning time: 0.000ms finishing time: 0.050ms beginnin...
Read more

django rest framework - DRF 3.0: UniqueTogetherValidator with a read-only field -

-
in process of upgrading django rest framework 3.0 2.4.4 , want have read-only user field, failing because 'user' being required uniquetogethervalidator (i think) i have model (excuse typos, simplified , code works fine irl): class examplemodel(models.model): some_attr = models.positivesmallintegerfield() other_attr = models.positivesmallintegerfield() user = models.foreignkey(user) class meta: unique_together = ('some_attr', 'other_attr', 'user') viewset: class exampleviewset(viewsets.modelviewset): queryset = examplemodel.objects.all() serializer_class = exampleserializer def perform_create(self, serializer): serializer.save(user=self.request.user) def perform_update(self, serializer): serializer.save(user=self.request.user) serializer: class exampleserializer(serializers.modelserializer): user = userserializer(read_only=true) class meta: model = examplemodel n...
Read more