CSS 中心显示内联块？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4980525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS center display inline block?
提问by Jens T?rnell
I have a working code here: http://jsfiddle.net/WVm5d/(you might need to make the result window bigger to see the align center effect)
我在这里有一个工作代码：http: //jsfiddle.net/WVm5d/（您可能需要使结果窗口更大才能看到对齐中心效果）
Question
题
The code works fine but I don't like to have display: table;. It's the only way I could make the wrap-class align center. I think it would be better if there was a way to use display: block;or display: inline-block;. Is it possible to solve the align center another way?
代码工作正常，但我不喜欢display: table;. 这是我可以使 wrap-class 居中对齐的唯一方法。我认为如果有一种方法可以使用display: block;或display: inline-block;. 是否有可能以另一种方式解决对齐中心问题？
Adding a fixed with to the container is not an option for me.
向容器添加固定的 with 对我来说不是一个选择。
I will also paste my code here if the JS Fiddle link gets broken in the future:
如果将来 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>采纳答案by EdA
The accepted solution wouldn't work for me as I need a child element with display: inline-blockto be both horizontally and vertically centered within a 100% width parent.
接受的解决方案对我不起作用，因为我需要一个子元素display: inline-block在 100% 宽度的父元素中水平和垂直居中。
I used Flexbox's justify-contentand align-itemsproperties, which respectively allow you to center elements horizontally and vertically. By setting both to centeron the parent, the child element (or even multiple elements!) will be perfectly in the middle.
我使用了 Flexbox 的justify-content和align-items属性，它们分别允许您将元素水平和垂直居中。通过center在父元素上设置两者，子元素（甚至多个元素！）将完美地位于中间。
This solution does not require fixed width, which would have been unsuitable for me as my button's text will change.
这个解决方案不需要固定宽度，这对我来说是不合适的，因为我的按钮文本会改变。
Here is a CodePen demoand a snippet of the relevant code below:
这是一个 CodePen 演示和下面的相关代码片段：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
display: inline-block;
}<div class="parent">
<a class="child" href="#0">Button</a>
</div>回答by Bazzz
Try this. I added text-align: centerto body and display:inline-blockto wrap, and then removed your display: table
尝试这个。我添加text-align: center到 body 和display:inline-blockto wrap，然后删除了你的display: table
body {
background: #bbb;
text-align: center;
}
.wrap {
background: #aaa;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
回答by Spudley
If you have a <div>with text-align:center;, then any text inside it will be centered with respect to the width of that container element. inline-blockelements are treated as text for this purpose, so they will also be centered.
如果您有<div>with text-align:center;，则其中的任何文本都将相对于该容器元素的宽度居中。inline-block为此，元素被视为文本，因此它们也将居中。
回答by vijayscode
You can also do this with positioning, set parent div to relative and child div to absolute.
您也可以通过定位来做到这一点，将父 div 设置为相对，将子 div 设置为绝对。
.wrapper {
position: relative;
}
.childDiv {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
回答by CodeBiker
Similar to @vijayscode's answer, this will horizontally center an inline-block element:
与@vijayscode 的答案类似，这将使内联块元素水平居中：
display: inline-block;
position: relative;
left: 50%; // Move the element to the left by 50% of the container's width
transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left
回答by CodeBiker
You don't need to use "display: table". The reason your margin: 0 auto centering attempt doesn't work is because you didn't specify a width.
您不需要使用“显示：表格”。您的 margin: 0 自动居中尝试不起作用的原因是因为您没有指定宽度。
This will work just fine:
这将工作得很好：
.wrap {
background: #aaa;
margin: 0 auto;
width: some width in pixels since it's the container;
}
You don't need to specify display: block since that div will be block by default. You can also probably lose the overflow: hidden.
您不需要指定 display: block 因为默认情况下该 div 将被阻止。您也可能会丢失溢出：隐藏。
回答by Myles Gray
回答by Mitch
Great article i found what worked best for me was to add a % to the size
很棒的文章，我发现最适合我的方法是在尺寸上添加 %
.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}
回答by user2694412
Just use:
只需使用：
line-height:50px
line-height:50px
Replace "50px" with the same height as your div.
用与 div 相同的高度替换“50px”。
