CSS中心显示内联块?

我有一个工作代码在这里:http://jsfiddle.net/WVm5d/(你可能需要使结果窗口更大，以看到对齐中心效果)

问题

代码工作正常，但我不喜欢有display: table;。这是唯一能让包装类对齐居中的方法。我认为如果有一种使用display: block的方法会更好;或显示:inline-block;。是否可以用另一种方法解决对齐中心问题?

在容器中添加固定的with对我来说不是一个选项。

我也将粘贴我的代码在这里，如果JS提琴链接在未来被打破:

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>

当前回答

我只是改变了2个参数:

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

现场演示

2011-02-12 23:48:17

其他回答

这将使一个内联块元素水平居中，而不需要修改其父元素的样式:

  display: inline-block;
  position: relative;
  /* Move the element to the right by 50% of the container's width */
  left: 50%; 
  /* Calculates 50% of the element's width, and moves it by that */ 
  /* amount across the X-axis to the left */
  transform: translateX(-50%);

2020-03-05 20:44:40

接受的解决方案不会为我工作，因为我需要一个子元素与display: inline-block水平和垂直居中100%宽度的父元素。

我使用了Flexbox的justify-content和align-items属性，它们分别允许你水平和垂直地居中元素。通过将两者都设置为位于父元素的居中，子元素(甚至多个元素!)将完全位于中间。

这个解决方案不需要固定的宽度，这将不适合我，因为我的按钮的文本会改变。

下面是一个CodePen演示和相关代码片段:

.parent { 显示:flex; justify-content:中心; 对齐项目:中心; ｝ < div class = "父" > <a class="child" href="#0">按钮</a> < / div >

2018-03-15 17:38:26

很棒的文章，我发现最适合我的是添加一个%的大小

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

2013-08-12 13:56:26

只使用:

行高:50 px

将“50px”替换为与div相同的高度。

2013-08-18 18:09:56

我只是改变了2个参数:

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

现场演示

2011-02-12 23:48:17

CSS中心显示内联块?

推荐文章

最新文章

标签