Question

有没有办法拥有一个响应式容器，因此无论屏幕尺寸如何，该容器内的所有项目都位于页面中间？谢谢:)）

图像显然已丢失，但代码如下：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sharpturn Network</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'>
    <meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport">
    <link href="stylesheet.css" rel="stylesheet"><!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
    <header>
        <img id="logo" src="img/upload.png">
        <nav>
            <a href="#" id="menu-icon"></a>
            <ul>
                <li><a class="active" href="index.html">HOME</a></li>
                <li><a class="nav" href="#">UPLOAD</a></li>
                <li><a class="nav" href="support.html">SUPPORT</a></li>
                <li><a class="nav" href="#">FAQS</a> </li>
            </ul>
        </nav>
    </header><img class="banner" src="img/banner.jpg">
        <h1 class="title">SIMPLE AS 1, 2, 3!</h1>
        <div class="steps">
            <img src="img/form.png">
            <h2 class="subtitle">Complete our form</h2>
            <p>A form diversly designed to take you upto no more than 5 minutes to complete and submit.</p>
        </div>
        <div class="steps">
            <img src="img/wait.png">
            <h2 class="subtitle">Patience is a virtue</h2>
            <p>Allow upto 72 hours for an submission review and response from our team.</p>
        </div>
        <div class="steps">
            <img src="img/uploaded.png">
            <h2 class="subtitle">Viola! All done.</h2>
            <p>Your talent is now being promoted and showcased world wide.</p>
        </div>
    <img class="banner" src="img/grande.jpg">
</body>
</html>

CSS

    /*MAIN*/
body {
    line-height: 1.25em;
    font-family: 'Roboto',sans-serif;
    background: url(img/banner.png);
    background-size: cover;
/* For flexibility */
    color: #505050;
    margin: 0;
    padding: 0;
}

header {
    background: #505050;
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 1px solid #fff;
    z-index: 100;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

#logo {
    margin-top: 20px;
    margin-left: 60px;
    float: left;
    width: 80px;
    height: 60px;
    display: block;
    padding-bottom: 25px;
}

nav {
    float: right;
    padding: 20px;
    color: #fff;
}

nav .active {
    font-size: 20px;
    color: #cc293f;
}

nav a {
    margin-right: 20px;
    font-size: 20px;
    color: #fff;
    text-decoration: none;
}

#menu-icon {
    width: 40px;
    height: 40px;
    background: #fff url(img/menu-icon.png) center;
}

a:hover {
    color: #cc293f;
}

a:hover#menu-icon {
    background-color: #fff;
    border-radius: 4px 4px 0 0;
}

ul {
    list-style: none;
}

li {
    color: #fff;
    display: inline-block;
    float: left;
}

.banner {
    width: 100%;
    height: 300px;
    border-bottom: 1px solid #000;
}

.supportbox1 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #fff;
    border: 3px solid #505050;
    float: left;
    margin: 50px 70px 25px 10px;
    max-height: 500px;
    max-width: 300px;
    min-height: 500px;
    min-width: 300px;
}

.supportbox1 p {
    padding-left: 8px;
    padding-right: 8px;
}

.supportbox1 img {
    padding-left: 41%;
    padding-top: 50px;
}

.supportbox2 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #fff;
    border: 3px solid #505050;
    float: left;
    margin: 50px 70px 25px 10px;
    max-height: 500px;
    max-width: 300px;
    min-height: 500px;
    min-width: 300px;
}

.supportbox2 p {
    padding-left: 8px;
    padding-right: 8px;
}

.supportbox2 img {
    padding-left: 41%;
    padding-top: 40px;
}

.supportbox3 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #fff;
    border: 3px solid #505050;
    float: left;
    margin: 50px 70px 25px 10px;
    max-height: 500px;
    max-width: 300px;
    min-height: 500px;
    min-width: 300px;
}

.supportbox3 p {
    padding-left: 5px;
    padding-right: 5px;
}

.supportbox3 img {
    padding-left: 41%;
    padding-top: 50px;
}

.supportbox3 a {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #505050;
    border: 3px solid #505050;
    color: #cc293f;
    font-size: 20px;
    margin: 90px 0 55px;
    padding: 5px 10px;
    position: absolute;
    text-decoration: none;
}

.imgicon {
    margin-left: -117px;
    max-height: 80px;
    max-width: 80px;
    min-height: 80px;
    min-width: 80px;
}

h1.title {
    text-align: center;
    font-size: 30px;
    color: #cc293f;
    margin-top: 25px;
    margin-bottom: 45px;
}

h1.sub {
    font-size: 24px;
    color: #cc293f;
    text-align: center;
    padding-bottom: 50px;
}

h2.subtitle {
    color: #cc293f;
    text-align: center;
    padding-top: -5px;
}

p {
    font-family: 'Roboto',sans-serif;
    margin-bottom: 20px;
}

.steps {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #fff;
    float: left;
    margin: 0 100px 10px -5px;
    max-height: 3500px;
    max-width: 300px;
    min-height: 350px;
    min-width: 300px;
}

.steps p {
    font-size: 19px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}

.steps img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/****Responsive ****/
@media only screen and (max-width:640px) {
    header {
        position: absolute;
    }

    .banner {
        width: 100% !important;
        height: 300px;
        border-bottom: 1px solid #000;
    }

    #menu-icon {
        display: inline-block;
    }

    nav ul,nav:active ul {
        display: none;
        position: absolute;
        padding: 10px;
        background: #505050;
        border: 5px solid #fff;
        right: 20px;
        top: 60px;
        width: 50%;
        border-radius: 4px 0 4px 4px;
    }

    nav li {
        font-color: #fff;
        text-align: center;
        width: 100%;
        padding: 10px 0;
        margin: 0;
    }

    nav:hover ul {
        background-color: #505050;
        display: block;
    }

    nav ul {
        background: #505050;
    }

Answer 1

设置容器属性文本对齐：中心;

并在容器内的元素中（如段落或img）指定

display：inline-block

集中文本 - 响应

1 个答案: