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;    
}

Answer 2

此处：小提琴：http://jsfiddle.net/3MvVK/1/

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

CSS：

 #wrapper{
   display:table;
 }

 .sidebar, .content { 
    display: table-cell;
 }

如果您希望文本中心对齐。将text-align:center;添加到.sidebar, .content

Answer 3

将text-align：center添加到两个元素的容器

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

Answer 4

试试此代码

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



.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;
    float:left;

}
.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;
    float:left;

}
.container{ margin:0 auto; 
            width:936px;
            }

Answer 5

希望这会对你有所帮助：

enter image description here

<html>
    <head>
        <title>
            Two columns
        </title>
        <style>
        #body{
            width: 800px;
            margin: auto;
        }
        #header{
            height: 50px;
            text-align: center;
        }
        #footer{
            height: 50px;
            text-align: center;
            clear: both;
        }
        .left{
            float: left;
            width: 49%;
            position: relative;
        }
        .right{
            float: right;
            width: 49%;
            position: relative;
        }
        div{
            border: 1px solid black;
        }
        </style>
    </head>
    <body>
        <div id="body">
            <div id="header">
                HEADER
            </div>
            <div class="left">
                LEFT
            </div>
            <div class="right">
                RIGHT
            </div>
            <div id="footer">
                FOOTER
            </div>
        </div>
    </body>
</html>

内联块div居中

5 个答案: