无法居中 div
[英] Unable to center divs
本文介绍了无法居中 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在无法居中的 div 中有一个 div.即使在 margin: 0 auto 并设置显式宽度之后，我似乎也无法弄清楚问题是什么.想知道它有什么问题以及如何解决这个问题.提前致谢！
<h1 class="header-title banner">服务</h1><div class="service-items"><div class="service-item"><span class="icon-box icon"></span><h2 class="service-title">移动</h2><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Donec aliquam laoreet nisl sed placerat.Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac actor.</p><a href="#">了解详情</a>
<div class="service-item"><span class="icon-box icon"></span><h2 class="service-title">交付</h2><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Donec aliquam laoreet nisl sed placerat.Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac actor.</p><a href="#">了解详情</a>
<div class="service-item"><span class="icon-box icon"></span><h2 class="service-title">会计</h2><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Donec aliquam laoreet nisl sed placerat.Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac actor.</p><a href="#">了解详情</a>
<div class="service-item"><span class="icon-box icon"></span><h2 class="service-title">IT 服务</h2><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Donec aliquam laoreet nisl sed placerat.Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac actor.</p><a href="#">了解详情</a>
CSS:
div.services-container {边距顶部:1em；溢出:隐藏；最大宽度:100%；边距:0 自动；}div.service-items {最大宽度:1280px；溢出:隐藏；边距:0 自动；}div.service-item {边框:1px纯黑色；宽度:45%；填充:1em；保证金:0 自动；向左飘浮;文本对齐:居中；}
解决方案
使用 display:inline-block; 而不是 float:left;
jsBin 演示
div.service-items {背景:#eee;最大宽度:1280px；溢出:隐藏；边距:0 自动；文本对齐:居中；/* 添加 */}div.service-item {边框:1px纯黑色；宽度:45%；填充:1em；保证金:0 自动；/* 浮动:左；*//* 删除 */显示:内联块；/* 添加 *//*文本对齐:居中；*//* 从这里移除 */}
I have a div inside a div that is unable to be centered. I can't seem to figure out what is the issue even after margin: 0 auto and setting a explicit width. Would like to know what is wrong with it and how to I solve this issue. Thanks in advance!
<div class="services-container">
<h1 class="header-title banner">Services</h1>
<div class="service-items">
<div class="service-item">
<span class="icon-box icon"></span><h2 class="service-title">Moving</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam laoreet nisl sed placerat. Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac auctor. </p>
<a href="#">Learn More</a>
</div>
<div class="service-item">
<span class="icon-box icon"></span><h2 class="service-title">Delivery</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam laoreet nisl sed placerat. Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac auctor. </p>
<a href="#">Learn More</a>
</div>
<div class="service-item">
<span class="icon-box icon"></span><h2 class="service-title">Accounting</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam laoreet nisl sed placerat. Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac auctor. </p>
<a href="#">Learn More</a>
</div>
<div class="service-item">
<span class="icon-box icon"></span><h2 class="service-title">IT Services</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam laoreet nisl sed placerat. Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac auctor. </p>
<a href="#">Learn More</a>
</div>
</div>
</div>
CSS:
div.services-container {
margin-top: 1em;
overflow:hidden;
max-width: 100%;
margin: 0 auto;
}
div.service-items {
max-width: 1280px;
overflow:hidden;
margin: 0 auto;
}
div.service-item {
border:1px solid black;
width:45%;
padding: 1em;
margin:0 auto;
float:left;
text-align: center;
}
解决方案
Use display:inline-block; instead of float:left;
jsBin demo
div.service-items {
background:#eee;
max-width: 1280px;
overflow:hidden;
margin: 0 auto;
text-align: center; /* ADD */
}
div.service-item {
border:1px solid black;
width:45%;
padding: 1em;
margin:0 auto;
/*float:left;*/ /* REMOVE */
display:inline-block; /* ADD */
/*text-align: center; */ /* REMOVE FROM HERE */
}
这篇关于无法居中 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
