Html 页面未满时动态居中调整网页内容_Html_Css

Html 页面未满时动态居中调整网页内容

html css

Html 页面未满时动态居中调整网页内容,html,css,Html,Css,我有一个网页，左边有一个垂直的粘滞菜单，在一个div中。内容在水平方向上以页面为中心，在另一个div中。菜单div和内容div都在第三个div中，以页面为中心有时content div的内容比页面上的内容多，但有时却没有。在那些内容没有填满页面的情况下，我希望内容在页面示例上垂直居中。然而，当内容经过页面时，我希望内容像通常的例子一样被调整到顶部当内容超过页面时，默认设置可以正常工作。当内容中心没有填满页面时，如何使其垂直以下是我的CSS： body { font-family:

我有一个网页，左边有一个垂直的粘滞菜单，在一个div中。内容在水平方向上以页面为中心，在另一个div中。菜单div和内容div都在第三个div中，以页面为中心

有时content div的内容比页面上的内容多，但有时却没有。在那些内容没有填满页面的情况下，我希望内容在页面示例上垂直居中。然而，当内容经过页面时，我希望内容像通常的例子一样被调整到顶部

当内容超过页面时，默认设置可以正常工作。当内容中心没有填满页面时，如何使其垂直

以下是我的CSS：

body {
    font-family: "Arial", Helvetica, sans-serif;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 150%;
}

a {
    color: #6FBD31;
    text-decoration: none;
}

div.sticky-menu ul {
    list-style-type: none;
    text-align: right;
}

div.sticky-menu li {
    background-position: 100%;
    padding-right: .6em;
    font-size: 20px;
    margin: 0 0 15px 0;
}

div.sticky-menu {
    position: fixed;
    display: block;
    top: 30%;
}

div.sticky-menu a:link {
    color: #D8D8D8;
}

div.sticky-menu a:visited {
    color: #D8D8D8;
}

div.sticky-menu a:hover {
    color: #000000;
}

div.sticky-menu a:active {
    color: #D8D8D8;
}

div.wrapp {
    width: 55%;
    margin: 0 auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

div.content {
    width: 80%;
    margin: 2em auto;
}

主页的“我的HTML”：

<html>
    <head>
        <title>Allie Saupp&eacute;</title>
        <link rel="stylesheet" href="style.css">
        <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="content">
            <div class="sticky-menu">
                <ul id="menu-items">
                    <li class="item" id="home">
                        <a href="http://www.cs.wisc.edu/~aterrell/websiteScratch">Home</a>
                    </li>
                    <li class="item" id="research">
                        <a href="http://www.cs.wisc.edu/~aterrell/websiteScratch/research">Research</a>
                    </li>
                    <li class="item" id="publications">
                        <a href="http://www.cs.wisc.edu/~aterrell/websiteScratch/publications">Publications</a>
                    </li>
                    <li class="item" id="teaching">
                        <a href="http://www.cs.wisc.edu/~aterrell/websiteScratch/teaching">Teaching</a>
                    </li>
                </ul>
            </div>

            <div class="wrapp">
                <p>
                I am a Ph.D. candidate at the <a href="http://www.wisc.edu">University of Wisconsin-Madison</a> where I am part of the <a
                href="http://www.hci.cs.wisc.edu">Human-Computer Interaction Lab</a> in the <a href="http://www.cs.wisc.edu">Computer Sciences department</a>. I work
                with my advisor, <a href="http://www.cs.wisc.edu/~bilge">Bilge Mutlu</a>, to design more effective collaborative behaviors to enable robots to work
                alongside humans.
                </p>
            </div>
        </div>
    </body>
<html>

我希望段落垂直居中，例如，顶部和底部的空间大致相等。

在这里，我编辑了div，希望它能显示您想要的内容

div.content {
height: 500px;
width: 80%;
margin: 2em auto;
}

div.wrapp {
width: 55%;
margin: 2em auto;
height: 250px;
position: relative;
top: 65%;
transform: translateY(-50%);
}
div.multiplewrapps {
width: 55%;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

不幸的是，这不是为狩猎而设计的。因此，如果您想在页面上使用多个段落，只需将类更改为multiplewrapps，它就会应用该css代码！=很高兴我能帮忙

我发现另一个伟大的网站，你应该看看这将真正有助于你的项目！