CSS中心顯示內嵌塊嗎？

150

我有一個工作代碼在這裏：http://jsfiddle.net/WVm5d/（您可能需要使結果窗口越大看到居中效果）CSS中心顯示內嵌塊嗎？

問題

代碼工作正常，但我不喜歡有display: table;。這是我可以製作包裝類對齊中心的唯一方法。我認爲如果有辦法使用display: block;或display: inline-block;會更好。另一種方式可以解決對齊中心問題嗎？

添加一個固定與容器不是我的選擇。

如果JS小提琴鏈接獲取未來打破我也會在這裏貼上我的代碼：

HTML

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

CSS

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

來源

2011-02-12 Jens Törnell

238

試試這個。我加text-align: center身體和display:inline-block包，然後刪除您display: table

body { 
    background: #bbb; 
    text-align: center; 
} 

.wrap { 
    background: #aaa; 
    margin: 0 auto; 
    display: inline-block; 
    overflow: hidden; 
}

來源

2011-02-12 21:00:50 Bazzz

@Brazzz照顧解釋爲什麼這是可行的？ – aandis 2014-06-30 06:03:55

+22

@zack div顯示爲內嵌塊時可以像文本一樣工作。你也可以使用像'white-space：nowrap;'這樣的東西。 – User2 2014-07-10 09:46:00

以及如果我不希望所有放在`body`中的元素都是文本對齊的中心？這聽起來像對我來說是一個巨大的矯枉過正 – Blauhirn 2016-04-01 20:40:00

如果您有<div>與text-align:center;，那麼它內部的任何文本將相對於該容器元素的寬度居中。 inline-block元素被視爲用於此目的的文本，因此它們也將居中。

來源

2011-02-12 21:00:41 Spudley

如何顯示：內聯元素？我測試它不工作，我期待它是 – geckob 2015-08-27 14:59:42

我只是改變2個參數：

.wrap { 
    display: block; 
    width:661px; 
}

Live Demo

來源

2011-02-12 23:48:17

-2

大文章中，我發現了什麼工作最適合我了在尺寸上加一個％

.wrap { 
margin-top:5%; 
margin-bottom:5%; 
height:100%; 
display:block;}

來源

2013-08-12 13:56:26 Mitch

你不需要使用「display：table」。您的保證金：0自動居中嘗試不起作用的原因是因爲您沒有指定寬度。

這會工作得很好：

.wrap { 
    background: #aaa; 
    margin: 0 auto; 
    width: some width in pixels since it's the container; 
}

你並不需要指定顯示：塊，因爲該分區將被默認塊。你也可能會失去溢出：隱藏。

來源

2013-08-12 14:08:40

-5

只需使用：

line-height:50px

替換「50像素」具有相同高度的股利。

來源

2013-08-18 18:09:56 user2694412

你也可以通過定位來做到這一點，將父div設置爲relative和child div爲絕對值。

.wrapper { 
     position: relative; 
    } 
.childDiv { 
     position: absolute; 
     left: 50%; 
     transform: translateX(-50%); 
    }

來源

2017-04-22 05:35:21 vijayscode

CSS中心顯示內嵌塊嗎？

回答

相關問題