html - 内联 block div 居中

Question

我已经编写了几年代码，但目前正在学习 CSS，我目前遇到的问题如下:我想将 2 个 div 彼此相邻放置，但也将它们居中，我目前正在使用的代码:

HTML:

<div class="sidebar">Placeholder</div><div class="content">Placeholder</div>

CSS:

.sidebar { 
width: 223px; 
height: auto;
background-color: #E9E9E9;
border-radius: 5px;
border: 1px solid #7F7F7F;
box-shadow: inset 0px 1px 0px #FDFDFD;
box-shadow: 0px 1px 0px #949494;
margin-right: 20px;
padding: 5px;
display: inline-block;
margin: auto;
}
.content {
width: 689px;
height: auto;
background-color: #E9E9E9;
border-radius: 5px;
border: 1px solid #7F7F7F;
box-shadow: inset 0px 1px 0px #FDFDFD;
box-shadow: 0px 1px 0px #949494;
padding: 5px;
display: inline-block;
margin: auto;
}

谁能帮我解决这个问题？ ;)

Answer 1

将元素包裹在一个容器中，并赋予它 text-align: center。

http://jsfiddle.net/q8tKP/ :

.container {
    text-align: center;
}

.sidebar, .content {
    display: inline-block;    
}