CSS中心顯示內聯(lián)塊？我在這里有一個工作代碼：http：//jsfiddle.net/WVm5d/（你可能需要讓結果窗口更大才能看到對齊中心效果）題代碼工作正常，但我不喜歡display: table;。這是我制作包裝類對齊中心的唯一方法。我認為如果有一種方法可以使用display: block;或更好display: inline-block;。是否有可能以另一種方式解決對中中心？添加固定的容器對我來說不是一個選擇。如果JS Fiddle鏈接在未來被破壞，我也會在此處粘貼我的代碼：body {
background: #bbb;}.wrap {
background: #aaa;
margin: 0 auto;
display: table;
overflow: hidden;}.sidebar {
width: 200px;
float: left;
background: #eee;}.container {
margin: 0 auto;
background: #ddd;
display: block;
float: left;
padding: 5px;}.box {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
float: left;}.box:nth-child(3n+1) {
clear: left;}<div class="wrap">
<div class="sidebar">
Sidebar </div>
<div class="container">
<div class="box">
Height1 </div>
<div class="box">
Height2<br />
Height2 </div>
<div class="box">
Height3<br />
Height3<br />
Height3 </div>
<div class="box">
Height1 </div>
<div class="box">
Height2<br />
Height2 </div>
<div class="box">
Height3<br />
Height3<br />
Height3 </div>
</div>
<div class="sidebar">
Sidebar </div></div>
3 回答
哆啦的時光機
TA貢獻1779條經驗 獲得超6個贊
接受的解決方案對我不起作用，因為我需要一個子元素，display: inline-block在100％寬度父級中水平和垂直居中。
我使用了Flexbox justify-content和align-items屬性，它們分別允許您水平和垂直居中元素。通過將兩者都設置center為父元素，子元素（甚至多個元素?。⑼耆挥谥虚g。
這個解決方案不需要固定的寬度，這對我來說是不合適的，因為我的按鈕的文本會改變。
這是CodePen演示和以下相關代碼的片段：
.parent {
display: flex;
justify-content: center;
align-items: center;}.child {
display: inline-block;}<div class="parent"> <a class="child" href="#0">Button</a></div>
藍山帝景
TA貢獻1843條經驗 獲得超7個贊
如果你有一個<div>with text-align:center;，那么其中的任何文本都將相對于該容器元素的寬度居中。inline-block為此目的，元素被視為文本，因此它們也將居中。
添加回答
舉報
0/150
提交
取消