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>

当前回答

如果你有一个<div> text-align:center;，那么它里面的任何文本都将相对于容器元素的宽度居中。为此，内联块元素被视为文本，因此它们也将居中。

2011-02-12 21:00:41

其他回答

我只是改变了2个参数:

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

现场演示

2011-02-12 23:48:17

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

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

2013-08-12 13:56:26

试试这个。我添加了text-align: center到body，并添加了display:inline-block到wrap，然后删除了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

接受的解决方案不会为我工作，因为我需要一个子元素与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

你也可以这样做定位，设置父div为相对和子div为绝对。

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

2017-04-22 05:35:21

CSS中心显示内联块?

推荐文章

最新文章

标签