Question

我可能会对一些非常明显的东西不以为然，但无论如何。

我有一组6个<iframe>个元素，分为2行，每行3列。这里的问题是，即使考虑到父<div>的宽度为100％，为每个iframe建立width: 30%; +仅为第一个left-margin: 1%;（装订线）+ left-margin: 4%;每行iframe仍然没有集中整个块。

想法？

＆＃13;

#portfolio {
width: 100%;
height: 100vh;
background-color: #C0C0C0;
}

#portfolio > h2 {
font-family: "Optima LT Std Italic";
font-size: 2.625em;
text-transform: uppercase;
text-align: center;
padding-top: 1%;	
}

.presentation {
width: 100%;
margin-top: 1%;
background-color:#DE6F71; /*Just for a better visualization during the development*/
}

iframe {
display: inline-block;
width: 30%;
margin-left: 1%;
margin-bottom: 1%;
}

.noLeftMargin {
margin-left: 4%; 	 
}

＆＃13;

<body>
    
    	<section id="portfolio">
        
        	<h2>Portfolio</h2>
            <h3>Websites</h3>
        	<h3>Audio</h3>
            
          	<div class="presentation">
    
            <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk" allowfullscreen class="noLeftMargin"></iframe>
            <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk"></iframe>
            <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk"></iframe>
            <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk" class="noLeftMargin"></iframe>
            <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk"></iframe>
            <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk"></iframe>

          	</div>
          
        </section>
    
    </body>

＆＃13;

Answer 1

将text-align: center添加到父div。这将使所有iframe元素居中，因为它们是inline-block
删除.noLeftMargin类
iframe元素指定margin: 0 .5% 1% .5%;，因此左右边距相同，水平空间平衡。
向父级添加padding: 0 3.5%并删除宽度（div将占用可用空间）

结果是

(3.5% 
+ 0.5%) + <iframe> + (0.5% +
+ 0.5%) + <iframe> + (0.5% +
+ 0.5%) + <iframe> + (0.5% +
+ 3.5%)

即

4% + iframe + 1% + iframe + 1% + iframe + 4%

请注意，inline-block元素之间可能会显示一些额外的空间，但这是一个众所周知的行为，有关此主题的许多答案都可以在SO上找到

＆＃13;

#portfolio {
  width: 100%;
  height: 100vh;
  background-color: #C0C0C0;
}


.presentation {
   margin: 1% 0 0 0;
   padding: 0 3.5%;
   background-color:#DE6F71; 
   text-align:center;
}

iframe {
   display: inline-block;
   width: 30%;
   margin : 0 .5% 1% .5%;
}

＆＃13;

<body>
  
  	<section id="portfolio">

   	<div class="presentation">
    
         <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk" allowfullscreen ></iframe>
         <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk"></iframe>
         <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk"></iframe>
         <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk" ></iframe>
         <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk"></iframe>
         <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk"></iframe>
  	</div>
          
</section>
    
</body>

＆＃13;

Answer 2

<强> EDITED

我猜你想要这样的东西：

1）删除了noLeftMargin 类，因为弄乱了你的游戏

2）为演示类增加了填充：0％2.2％; 。

3）为iframe添加 margin-left：1％2.2％; 。

WORKING:DEMO

#portfolio {
    width: 100%;
    height: 100vh;
    background-color: #C0C0C0;
}
#portfolio > h2 {
    font-family:"Optima LT Std Italic";
    font-size: 2.625em;
    text-transform: uppercase;
    text-align: center;
    padding-top: 1%;
}
.presentation {
    width: 100%;
    margin-top: 1%;
    padding:0% 2.2%;
    background-color:#DE6F71;
    /*Just for a better visualization during the development*/
}
iframe {
    display: inline-block;
    width: 30%;
    margin: 0%;
    margin-left: 1%;
    margin-bottom: 1%;
}

<section id="portfolio">
    	<h2>Portfolio</h2>

     <h3>Websites</h3>

    	<h3>Audio</h3>

    <div class="presentation">
        <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk" allowfullscreen ></iframe>
        <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk"></iframe>
        <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk"></iframe>
        <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk" ></iframe>
        <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk"></iframe>
        <iframe src="https://www.youtube.com/embed/NpsVY_jsGWk"></iframe>
    </div>
</section>

集中基于百分比的div中的内容

2 个答案: