html - 将内容集中在基于百分比的 div 中

我可能正在考虑一些非常明显的事情，但无论如何。

我得到了一套 6 个 <iframe>元素分为 2 行 3 列。这里的问题是，即使考虑到父级的宽度为 100% <div> , 建立 width: 30%;对于每个 iframe + 一个 left-margin: 1%; (装订线)+ left-margin: 4%;只为第一个iframe在每一行中仍然没有集中整个 block 。

想法？

#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%; 	 
}

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

最佳答案

添加一个 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 上找到

#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%;
}

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

关于html - 将内容集中在基于百分比的 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30662458/

html - 将内容集中在基于百分比的 div 中

上一篇：javascript - 循环计时器sgv html js css，当变大时，线条与大小不匹配

下一篇：css - 如何在 Retina Macbook 上测试响应式网站？