如何使此代码居中？答案

【问题标题】：How to center this code?如何使此代码居中？
【发布时间】：2016-08-30 07:35:30
【问题描述】：

请帮助我将下面的代码居中并告诉我你是如何做到的：

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/

【问题讨论】：

以什么方式（水平或垂直）？
请水平 :)

标签： html css center centering

【解决方案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 ，输出如下所示：

【讨论】：

【解决方案2】：

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

（新小提琴：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>

【讨论】：