Question

这个居中的div问题永远不会消失！我需要帮助... 出于某种原因，即使整个互联网都有答案，我也从未设法集中多个浮动div。!! （我的问题是什么？）

＆＃13;

     .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;
     }

＆＃13;

<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>

＆＃13;

有人可以在这里指出我的问题吗？我尝试了一切，我即将退出CSS并回到表格。我设法将1个div设为中心，但从来没有多次浮动...我访问的几乎每个网站都说同样的事情......但我从未做过。

请帮忙！

Answer 1

如果您从float: left;移除.vidtype，他们会自行居中。

＆＃13;

.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;
}

＆＃13;

 <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>

＆＃13;

您的代码中也有一些我已修复的错误。

<img>代码必须始终包含结束/和alt=""属性，例如此<img src="pathtoimage.jpg" alt="" />。

如果您不确定HTML是否正确，可以通过W3C Validation Service进行检查，然后查看。
不要使用<br>创建新行，而是将内容包装在块元素中，例如<p>或<div>。块元素将自动显示在新行上。
bordder-radius:10px;是拼写错误的CSS属性，无效。它应该是border-radius:10px;
最后，请确保正确缩进和格式化代码，这确实使您和其他人更容易使用。如果您计划要求其他人帮助您，那么应该始终瞄准漂亮而干净的代码。

演示：http://jsfiddle.net/9my9Lbon/2/

Answer 2

即将退出CSS并返回表格。

首先，不要这样做^

你需要在另一个div中包围浮动的div。然后将周围的div设置为margin: 0 auto;

此外，停止使用休息时间来推倒事物。这就是利润率。

如果您很难理解CSS和HTML Code Academy是免费的，并且可以帮助您立即学习。

祝你好运！

CSS居中浮动div

2 个答案: