CSS center display inline block?
CssCss Problem Overview
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)
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?
Adding a fixed with to the container is not an option for me.
I will also paste my code here if the JS Fiddle link gets broken in the future:
<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>
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;
}
Css Solutions
Solution 1 - Css
Try this. I added text-align: center
to body and display:inline-block
to wrap, and then removed your display: table
body {
background: #bbb;
text-align: center;
}
.wrap {
background: #aaa;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
Solution 2 - Css
The accepted solution wouldn't work for me as I need a child element with display: inline-block
to be both horizontally and vertically centered within a 100% width parent.
I used Flexbox's justify-content
and align-items
properties, which respectively allow you to center elements horizontally and vertically. By setting both to center
on the parent, the child element (or even multiple elements!) will be perfectly in the middle.
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 demo and a snippet of the relevant code below:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
<div class="parent">
<a class="child" href="#0">Button</a>
</div>
Solution 3 - Css
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-block
elements are treated as text for this purpose, so they will also be centered.
Solution 4 - Css
This will horizontally center an inline-block element without needing to modify its parent's styles:
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%);
Solution 5 - Css
You can also do this with positioning, set parent div to relative and child div to absolute.
.wrapper {
position: relative;
}
.childDiv {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Solution 6 - Css
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.
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.
Solution 7 - Css
Solution 8 - Css
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;}
Solution 9 - Css
Just use:
line-height:50px
Replace "50px" with the same height as your div.