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中心显示内嵌块吗？

回答

相关问题