Question

我有一些布局设计，

我想将div与id对齐：#middle to center。

我在这个div上将背景颜色设置为绿色。

我也希望保持当前的布局状态，如滚动条，大小等......

实施此方法的最佳方法是什么？

我附上了我的代码片段和jsfiddle，如下所示。

JSFiddles：https://jsfiddle.net/crisply/yr8he13g/8/

请参考这个并给我一些建议。

提前谢谢。

<body>
<form method="post" action="./" id="form1" class="AspForm">

    <div id="header">
        <div id="top">
            <div id="logo">
                Logo
            </div>
            <div id="pageInfo">
                <div id="pageTitle">Title</div>
                <div id="pageDesc">Description</div>
                <div id="samplingInfo">Informations</div>
            </div>
        </div>
        <div id="menu">
            Menu
        </div>
    </div>


    <div id="content">
        <div id="middle">
            contents
       </div>
    </div>


    <div id="footer">
        <div id="copyright">
            Copyright &copy; 2015 eZRobotics. All rights reserved.
        </div>

        <div id="loginState">
            <table>
                <tr>
                    <td valign="top">
                        <div id="username">admin</div>
                    </td>
                    <td>
                        logout btn
                    </td>
                </tr>
            </table>
        </div>
    </div>    
</form>
</body>

这是css

html, body {
    /*font-size: 12px;*/
    font-family:'Tahoma', 'Segoe UI', Verdana !important;
}
body {
    height:100%;
}
div {
    box-sizing: border-box;
}
/* -- header ----------------------------------------------- */
 #header {
    position:absolute;
    left:0px;
    right:0;
    top:0;
    height:90px;
    /* TOP height + menu height*/
}
#top {
    height: 60px;
}
#logo {
    padding: 15px;
    height: 30px;
    width: 200px;
}
/* Title & sampling information */
 #pageInfo {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    margin: 10px;
    text-align: center;
    vertical-align:central;
}
#pageTitle {
    font-size: 23px;
    font-weight: bold;
    font-family: Tahoma, 'Segoe UI', Verdana;
}
#pageDesc {
    font-size: 14px;
    color: #666;
}
#samplingInfo {
    position: absolute;
    bottom: 0px;
    right: 0px;
    text-align: right;
    font-size: 13px;
}
#menu {
    height: 30px;
    background-color: #666666;
    text-align: center;
}
/* -- ccontent ----------------------------------------------- */
 #content {
    top:90px;
    /* header height */
    bottom:24px;
    /* Footer height */
}
/* content */
 #left {
    position:absolute;
    top: inherit;
    /* header height */
    bottom: inherit;
    left:0;
    width:200px;
    padding: 10px 10px 10px 10px;
}
#right {
    overflow:auto;
    overflow-y: scroll;
    position:absolute;
    top: inherit;
    /* header height */
    bottom: inherit;
    left:200px;
    right:0;
    padding: 10px 10px 10px 0px;
}
#middle {
    overflow-y: scroll;
    position:absolute;
    top: inherit;
    bottom: inherit;
    left:0;
    right:0;
    padding: 10px 10px 10px 10px;
    max-width: 940px;
    background-color: green;
}
/* -- footer ----------------------------------------------- */
 #footer {
    position:absolute;
    left:0px;
    right:0;
    bottom:0;
    height:24px;
    line-height: 24px;

    overflow:hidden;
    background-color: #666666;
    color: #eee;
    font-size: 13px;
}
#copyright {
    text-align: right;
    position: absolute;
    top: 0px;
    left: 0px;
    padding-left: 5px;
    /*background-color: blue;*/
}
#loginState {
    position: absolute;
    top: 0px;
    right: 0px;
    /*background-color: green;*/
}
#username {
    border: 1px solid #C5C5C5;
    height: 18px !important;
    line-height: 18px;
    font-size:13px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 5px;
}
/* Table */
 .tbl {
    width:100%;
    height:100%;
    /*border:1px solid #000;*/
    border-collapse:collapse;
}
.tbl th, td {
    /* border:1px solid #000; */
}
.tbl th {
    background-color:#eee;
}

Answer 1

<强> CSS

#middle {
  overflow-y: scroll;
  position: absolute;
  top: inherit;
  bottom: inherit;
  left: 0;
  right: 0;
  padding: 10px 10px 10px 10px;
  max-width: 940px;
  background-color: green;
  margin: 0 auto;
}

DEMO

Answer 2

只需将margin: 0 auto添加到#middle DEMO

即可

#middle {
  overflow-y: scroll;
  position: absolute;
  top: inherit;
  bottom: inherit;
  left: 0;
  right: 0;
  padding: 10px 10px 10px 10px;
  max-width: 940px;
  background-color: green;
  margin: 0 auto;
}

Answer 3

尝试 -

#middle{
  text-align: center;
}

希望这有帮助！

Answer 4

为#middle

尝试text-align:center;

Answer 5

在你的css底部添加这些行，它会起作用

@media screen and (min-width: 940px){
    #middle {
        left:calc(50% - 470px);
    }
}

https://jsfiddle.net/7aL3v56d/embedded/result/

如何对齐中心div元素

5 个答案: