CSS中心显示内联块？答案

【问题标题】：CSS center display inline block?CSS中心显示内联块？
【发布时间】：2011-06-26 05:11:25
【问题描述】：

我这里有一个工作代码：http://jsfiddle.net/WVm5d/（您可能需要将结果窗口放大才能看到居中对齐效果）

问题

代码运行良好，但我不喜欢display: table;。这是我可以使 wrap-class 对齐中心的唯一方法。我认为如果有办法使用display: block; 或display: inline-block; 会更好。是否可以通过其他方式解决对齐中心问题？

给容器添加一个固定的 with 不是我的选择。

如果将来 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>

【问题讨论】：

标签： css

【解决方案1】：

如果您有一个<div> 和text-align:center;，那么其中的任何文本都将相对于该容器元素的宽度居中。为此，inline-block 元素被视为文本，因此它们也将居中。

【讨论】：

display:inline 元素怎么样？我测试它没有按照我期望的方式工作

【解决方案2】：

试试这个。我在正文中添加了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;
}

【讨论】：

@zack div 在显示为内联块时就像文本一样工作。你也可以在上面使用white-space: nowrap; 之类的东西。
如果我不希望我所有放置在body 中的元素成为文本对齐中心怎么办？这对我来说听起来有点矫枉过正
@Blauhirn，只需在 inline-block 元素周围制作一个块包装器，然后设置 css 属性 text-align:center;他以body标签为例。

【解决方案3】：

我只更改了 2 个参数：

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

Live Demo

【讨论】：

设置一个固定的不是我的选择。找到了另一个解决方案。还是谢谢。
那是什么？
它不是内联块的响应式居中。

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您不需要使用“显示：表格”。您的 margin: 0 自动居中尝试不起作用的原因是您没有指定宽度。

这会很好用：

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

您不需要指定 display: block 因为该 div 默认会被阻止。您也可能会丢失溢出：隐藏。

【讨论】：

【解决方案6】：

只需使用：

line-height:50px

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

【讨论】：

请更具体的添加line-height。
最初的问题是关于水平居中的，如text-align: center;的使用所示。调整 line-height 是一种垂直居中的解决方案，尽管对于 inline-block 来说不是一个非常强大的解决方案。
这甚至没有关系。

【解决方案7】：

您也可以通过定位来做到这一点，将父 div 设置为相对，将子 div 设置为绝对。

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

【讨论】：

【解决方案8】：

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

我使用了 Flexbox 的 justify-content 和 align-items 属性，它们分别允许您将元素水平和垂直居中。通过在父元素上将两者都设置为center，子元素（甚至是多个元素！）将完美地位于中间。

此解决方案不需要固定宽度，这对我来说不合适，因为我的按钮文本会发生变化。

Here is a CodePen demo 和下面相关代码的 sn-p：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

【讨论】：

这个问题是在 Flexbox 之前创建的，但现在这种方法更好，所以我接受了它作为答案。
@JensTörnell 在这种情况下使用 inline-block 是没用的，可以将其删除
这比使用 text-align center 要好得多。该实现只是将文本居中泄漏到所有子组件。不要这样做。
@TemaniAfif 是对的 - 谢谢。我不需要在那里有 display: inline-block; 规则（我认为它是不可或缺的，但事实并非如此）所以我已经删除了它。

【解决方案9】：

这将使内联块元素水平居中，而无需修改其父元素的样式：

  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%);

【讨论】：