Question

这是我的HTML和CSS文件：我试图弄清楚如何将包括表单和按钮在内的所有标题移到页面中间。现在他们都在底部。我已将它发布在codepen（https://codepen.io/tuhmatyow/pen/xLjEqv）上，但它看起来很奇怪，因为我使用的是material.io。以下是它实际外观的截图。

<title="Action Auctions"></title>
<body>
<center>
    <h1 class="title">Action Auctions</h1>
    <div class="triangle1"></div>
    <div class="triangle2"></div>
    <h1 class="congratulations">Congrats! You won!</h1>
    <h1 class="but">BUT...</h1>

    <h2 class="donateEarnings">You can still donate your earnings!</h2>
    <form action="/winner/" method="POST">
        {% csrf_token %}
        {{ donate_form }}
        <!-- <input type="submit" value="DONATE!"> -->
        <button button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Donate</button>
    </form>
    <br><br>
    <h3 class="transfer">...or have them transferred to your card</h3>
    <form action="/winner/" method="POST">
        {% csrf_token %}
        {{ reimburse_form }}
        <!-- <input type="submit" value="Receive Earnings"> -->
        <button button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">Receive Earnings</button>
    </form>

    <nav class="fixed-nav-bar-bottom">
        <h3 class="copyright">Copyright 2017 ©</h3>
    </nav>
</center>
</body>

 body {
      background-color: #1F2831;
      position: fixed;
    }

    .title {
      color: #FFFFFF;
        font-family: 'Raleway', sans-serif;
        border-bottom: 1px solid;
        padding-top: 30px;
        width: 10em;
        /*overflow: hidden;*/
        letter-spacing: .15em;
        /*text-align: center;*/
        /*white-space: nowrap;*/
        /*margin: 0 auto;*/
    }

    .triangle1 {
        width: 0;
        /*height: 0;*/
        top: -80px;
        right: 145px;
        border-style: solid;
        border-width: 100px 50px 0 50px;
        border-color: #8aa0b8 transparent transparent transparent;
        position: relative;
        z-index: -1;
    }

    .triangle2 {
        width: 0;
        /*height: 0;*/
        top: -150px;
        left: 130px;
        border-style: solid;
        border-width: 50px 0 50px 100px;
        border-color: transparent transparent transparent #f59d3f;
        position: relative;
        z-index: -1;
    }

    .congratulations {
      color: #FFFFFF;
        font-family: 'Raleway', sans-serif;
      font-size: 30px;
        margin: auto;
    }

    .but {
      color: #FFFFFF;
        font-family: 'Raleway', sans-serif;
      font-size: 30px;
        margin: auto;
    }

    .form-control {
        height: 30px;
        padding-left: 10px;
        margin: auto;
        background-color: #1F2831;
        color: #FFFFFF;
        font-family: 'Raleway', sans-serif;
    }

    .donateEarnings {
      color: #FFFFFF;
        font-family: 'Raleway', sans-serif;
      font-size: 30px;
        margin: auto;
    }

    .transfer {
      color: #FFFFFF;
        font-family: 'Raleway', sans-serif;
      font-size: 30px;
        margin: 0 auto;
    }

    .copyright {
        color: #FFFFFF;
        font-size: 10px;
        font-family: 'Raleway', sans-serif;
    }

    .fixed-nav-bar-bottom {
        /*top: 0;*/
        /*left: 0;*/
        bottom: 0;
        height: 10%;
        width: 100%;
        z-index: -1;
        position: fixed;
        background-color: #39678E;
    }

Answer 1

你的三角形类设置为＆＃34;显示：relative＆＃34;这意味着他们正在堆叠...你通过给每个三角形的顶部＆＃34;顶部＆＃34;提供负值来纠正它。位置。这基本上使每个三角形的主体元素伸展，并且每个三角形都只是将每个三角形垂直放置在它们所在的元素容器之上和之上。

制作每个三角形的＆＃34;位置：固定＆＃34;并调整你的上/左/右以将三角形放在你想要的位置。

也许是这样的：

.triangle1 {
    width: 0;
    /*height: 0;*/
    top: 25px;
    left: 90px;
    border-style: solid;
    border-width: 100px 50px 0 50px;
    border-color: #8aa0b8 transparent transparent transparent;
    position: absolute;
    z-index: -1;
}

.triangle2 {
    width: 0;
    /*height: 0;*/
    top: 50px;
    left: 130px;
    border-style: solid;
    border-width: 50px 0 50px 100px;
    border-color: transparent transparent transparent #f59d3f;
    position: absolute;
    z-index: -1;
}

.center{
    position:relative;
    display: block;
}

并添加课程＆＃34; center＆＃34;到你的中心元素：

<center class="center">

这是@ i-haz-kode上述评论的地方。

CSS定位。移动标题更高

1 个答案: