将<div>居中放在侧栏上

时间：2015-08-27 18:35:52

标签： html css

我道歉，但不幸的是我找不到任何答案。

我有这段代码：

#wrapper {
	width: 844px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
#posts {
	width: 844px;
	float: left;
}
.entry {
	border: 1px solid black;
	padding: 10px;
	float: left;
	width: 400px;
}
#sidebar {
	position: fixed;
	width: 250px;
	height: 100%;
	top: 0px;
	right: 0px;
	display: table; /* needs to center stuff vertically inside of the sidebar */
}

<body>
<div id='wrapper'>
	<div id='posts'>
			{block:Posts}
				<div class='entry'>
					<!-- Tumblr posts -->
				</div>
			{/block:Posts}
	 </div>
</div>
<div id='sidebar'>
	<!-- Stuff in the sidebar -->
</div>
</body>

我想让我的#posts居中于没有侧边栏的区域。我的意思是#posts必须集中在自己的容器中。在我已经展示的代码中，它超越了侧边栏。

1 个答案:

答案 0 :(得分：0)

您的问题不是那么清楚，但我按照我的理解编码check this link

HTML

   <div id='wrapper'>
        <div id='posts'>
                {block:Posts}
                    <div class='entry'>
                        <!-- Tumblr posts -->
                    </div>
                {/block:Posts}
         </div>
<div id='sidebar'>
        <!-- Stuff in the sidebar -->
    </div>
    </div>

CSS

             #wrapper {
                    width: 600px;
                    display: block;
                    margin-left: auto;
                    margin-right: auto;
                    text-align: center;
                    float:center;
                }
                #posts {
                    width: 70%;
                    text-align:center;
                    background-color:yellow;
                }
                .entry {
                    border: 1px solid black;
                    padding: 10px;
                    /* float: center; */
                    width: 200px;
                    margin-left:auto;
                    margin-right:auto;
                }
                #sidebar {
                    position: fixed;
                    width: 30%;
                    background-color:cyan;
                    height: 100%;
                    top: 0px;
                    right: 0px;
                    display: table; /* needs to center stuff vertically inside of the sidebar */
                }

根据需要使用包装纸的宽度，其余部分将自动调整。

点击上面的链接查看实时示例。我已经使用背景颜色来正确显示区域，如果需要，可以删除。