如何居中这段代码？

Question

请帮我把下面的代码居中，然后告诉我你是怎么做到的：

div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.iframe:hover {
    border: 1px solid #777;
}

div.img iframe {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

https://jsfiddle.net/zuntcod0/

Answer 1

如果您想轻松地将这些元素水平居中，您可以考虑使用最外层的 <div> 元素，为其定义明确的宽度并使用 margin: 0 auto 使其在整个页面中居中：

<div id='wrapper'>
     <!-- Your Content Here -->
</div>

连同：

#wrapper { 
     width: 800px;
     margin: 0 auto;
}

例子

您可以 see a working example of this in action here 输出如下所示：

Answer 2

如果您想将视频居中，则必须使用 text-align: center;，但这不适用于浮动元素。删除视频 div 中的 float: left; 并将其替换为 display: inline-block。它看起来像这样：

(新 fiddle: https://jsfiddle.net/zuntcod0/2/)

div.img {
    margin: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    width: 180px;
}

div.iframe:hover {
    border: 1px solid #777;
}

div.img iframe {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>

<div style="text-align: center">

<div class="img">
  <a target="_blank" href="fjords.jpg">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/cw7cOOQt5KM" frameborder="0" allowfullscreen></iframe>
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="fjords.jpg">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/cw7cOOQt5KM" frameborder="0" allowfullscreen></iframe>
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="fjords.jpg">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/cw7cOOQt5KM" frameborder="0" allowfullscreen></iframe>
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="fjords.jpg">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/cw7cOOQt5KM" frameborder="0" allowfullscreen></iframe>
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="fjords.jpg">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/cw7cOOQt5KM" frameborder="0" allowfullscreen></iframe>
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</div>

如何居中这段代码？

How to center this code?

html

css

center

centering