居中 2 个浮动图像

Posted 2023-03-29

【中文标题】居中 2 个浮动图像

【英文标题】：Center 2 floating images

【发布时间】：2017-07-19 21:03:51

【问题描述】：

我想居中 2 图像我已将显示设置为块和边距 0 但没有任何反应，我尝试了不同 div 的边距但也没有结果。我似乎无法找出我做错了什么，

这是css：

#partners 
background-color: #FFF;
height: 500px;
margin: auto;
display: block;


#partners h2 
color: #000000;
font-family: "helvetica";
font-size: 36px;
text-align: center;
padding-top: 110px;


.partner1 
float: left;
padding: 0px, 50px, 0px, 50px;
margin-top: 125px;



.partner1 img 
width: 300px;


.partner2 
float: left;
padding: 0px, 50px, 0px, 50px;
margin-top: 125px;
display: block;


.partner2 img 
width: 300px;
margin: auto;

【问题讨论】：

也分享您的 html。

【参考方案1】：

假设你的标记在这里，但你想将text-align: center添加到父级，然后使子块元素display: inline-block，那么这些元素将在父级中居中。

您也不需要在填充量之间使用逗号，我合并了您的一些 CSS。

#partners 
background-color: #FFF;
height: 500px;
margin: auto;
display: block;
text-align: center;


#partners h2 
color: #000000;
font-family: "helvetica";
font-size: 36px;
text-align: center;
padding-top: 110px;


.partner1, .partner2 
padding: 0px 50px 0px 50px;
margin-top: 125px;
display: inline-block;


.partner1 img, .partner2 img 
width: 300px;

【讨论】：

@LaurensvanVliet 太棒了，np。一旦您认为您的问题得到解决，请务必对有帮助的答案进行投票并接受答案（答案的复选标记）。

可以，如果我想添加更多图片，我只需要添加 .最后 2 个 sn-ps 的 partner3、partner4 等？

@LaurensvanVliet 如果它们都将具有相同的样式，那么您也应该为所有这些元素指定一个 .partner 类，那么您可以只设置样式 .partner 而不是列出所有个人.partner[number] 类。

好的，现在将回答我所有的问题...谢谢您的帮助。