このコードを中央に揃えるには？

Question

以下のコードを中心に私を助けとすることをあなたはどうやったのかを教えてください：あなたは簡単に水平に、これらの要素を中央にしたい場合は、あなたがあなたの最も外側の<div>要素を取って検討することもでき

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

は、あなたがtext-align: center;を使用する必要がありますが、そのフローティング要素では機能しません。ビデオ部門で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>

Answer 2

、定義一緒に

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

を：それは、全体的なページ内のそれを中央にmargin: 0 autoを使用するための明示的な幅

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

例

あなたsee a working example of this in action hereすることができ、どのような出力は以下のようになります。あなたがビデオを中心にしたい場合は