时间戳

首页 > 解决方案 > 空间和中心框

html - 空间和中心框

问题描述

嘿，我怎么把它们放在中间，并在它们之间留出更多的空间？我在网上找不到任何东西，我看了很多。如果你愿意，那么你也可以优化它，因为我的标题和框之间也没有空间

这是我的 HTML：

    <!DOCTYPE html>
    <html>
    <head>

        <meta charset="UTF-8">
        <meta name="description" content="Still developing">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <meta name="theme-color" content="#5b0c0c" />
        <!-- Titlen -->
        <title>Preview</title>

    </head>
    <body>
    <!-- navbar -->
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>

    <!-- under navbar-->
    <div class="header">

    <div id="container">
            <div id="context"> 
                <!--<div id="header-image"> -->
        </div>
        </div>
    </div>
        <br>
        <br>
        <br>

    <section id="textbox">
        <div>Text box 1</div>
        <div>Text box 2</div>
        <div>Text box 3</div>
    </section>

    <!-- footer -->
    <div class="footer">
      <p>Copyrights reserved to &copy realmymonsterdk| Contact information: <a href="mymonsterdk@gmail.com">
      mymonsterdk@gmail.com</a>.</p>
    </div>
    </body>
    </html>


    <!DOCTYPE html>
    <html>
    <head>

        <meta charset="UTF-8">
        <meta name="description" content="Still developing">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <meta name="theme-color" content="#5b0c0c" />
        <!-- Titlen -->
        <title>Preview</title>

    </head>
    <body>
    <!-- navbar -->
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>

    <!-- under navbar-->
    <div class="header">

    <div id="container">
            <div id="context"> 
                <!--<div id="header-image"> -->
        </div>
        </div>
    </div>
        <br>
        <br>
        <br>

    <section id="textbox">
        <div>Text box 1</div>
        <div>Text box 2</div>
        <div>Text box 3</div>
    </section>

    <!-- footer -->
    <div class="footer">
      <p>Copyrights reserved to &copy realmymonsterdk| Contact information: <a href="mymonsterdk@gmail.com">
      mymonsterdk@gmail.com</a>.</p>
    </div>
    </body>
    </html>

这是我当前的 CSS：

        html, body {
        width: 100%;
        margin: 0;
    }
    body {
        font-family: "Lato", sans-serif;
        background-color: #353535;

    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
    li {
        float: left;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    li a:hover:not(.active) {
        background-color: #931010;
    }
    .active {
        background-color: #931010;
    }
    .header{
        width: 100%;
        height: 550px;
        background-image: url("https://static-cdn.jtvnw.net/jtv_user_pictures/b76051a5-b2e6-4fbb-b53d-f41f62410905-profile_banner-480.png");
        background-repeat: no-repeat;
        background-size: cover;
    }
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        color: white;
        text-align: center;
    }

    #textbox {
        white-space: nowrap; 
        align-items: center;
    }

    #textbox div {
        display: inline-block;
        width: 250px;
        height: 250px;
        margin: auto;
        background: red;
        overflow: hidden;
    }


    #container {
      color: white;
      width: 400px;
      height: 260px;
    }

    #context {
      width: 250px;
      margin-left: auto;
      margin-right: -700px;
      position: relative;
      top: 60%;
      transform: translateY(10%);
    }

    #white {
      color: white;
    }

    #header-image {
      color: white;
      background-image: url("https://static-cdn.jtvnw.net/jtv_user_pictures/b76051a5-b2e6-4fbb-b53d-f41f62410905-profile_banner-480.png");
      width: 750px;
      height: 260px;
      position: relative;
      top: 30%;
      transform: translateY(10%);

    }

标签： htmlcss

解决方案

To make it center I used the text-align: center; in the CSS for the div. To make space between the boxes i used border: 30px solid #353535; in CSS to make the border the same color as the background. Here is the final code:

     html, body {
        width: 100%;
        margin: 0;
    }
    body {
        font-family: "Lato", sans-serif;
        background-color: #353535;

    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
    li {
        float: left;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    li a:hover:not(.active) {
        background-color: #931010;
    }
    .active {
        background-color: #931010;
    }
    .header{
        width: 100%;
        height: 550px;
        background-image: url("https://static-cdn.jtvnw.net/jtv_user_pictures/b76051a5-b2e6-4fbb-b53d-f41f62410905-profile_banner-480.png");
        background-repeat: no-repeat;
        background-size: cover;
    }
    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        color: white;
        text-align: center;
    }

    #textbox {
        white-space: nowrap; 
        align-items: center;
        text-align: center;
    }

    #textbox div {
        display: inline-block;
        width: 250px;
        height: 250px;
        margin: auto;
        background: red;
        overflow: hidden;
    }


    #container {
      color: white;
      width: 400px;
      height: 260px;
    }

    #context {
      width: 250px;
      margin-left: auto;
      margin-right: -700px;
      position: relative;
      top: 60%;
      transform: translateY(10%);
    }

    #white {
      color: white;
    }

    #header-image {
      color: white;
      background-image: url("https://static-cdn.jtvnw.net/jtv_user_pictures/b76051a5-b2e6-4fbb-b53d-f41f62410905-profile_banner-480.png");
      width: 750px;
      height: 260px;
      position: relative;
      top: 30%;
      transform: translateY(10%);

    }
    #box {
    border: 30px solid  #353535;
    text-align: left;
}
<!DOCTYPE html>
    <html>
    <head>

        <meta charset="UTF-8">
        <meta name="description" content="Still developing">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <meta name="theme-color" content="#5b0c0c" />
        <!-- Titlen -->
        <title>Preview</title>

    </head>
    <body>
    <!-- navbar -->
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>

    <!-- under navbar-->
    <div class="header">

    <div id="container">
            <div id="context"> 
                <!--<div id="header-image"> -->
        </div>
        </div>
    </div>
        <br>
        <br>
        <br>

    <section id="textbox">
        <div id="box">Text box 1</div>
        <div id="box">Text box 2</div>
        <div id="box">Text box 3</div>
    </section>

    <!-- footer -->
    <div class="footer">
      <p>Copyrights reserved to &copy realmymonsterdk| Contact information: <a href="mymonsterdk@gmail.com">
      mymonsterdk@gmail.com</a>.</p>
    </div>
    </body>
    </html>

By the way, I would full screen the code snippet it is small.

推荐阅读