Question

我希望为两个div元素.main_h2和.first_button使用自动居中值，它们是div #demo的子元素。我尝试将position:relative用于父级，position:absolute用于子级，但无法将元素放在中心位置。

守则：

＆＃13;

<!doctype html>
<html>
  <head>
    <style>
      #demo {
        width: 1440px;
        height: 592px;
        border: 0.1px solid #87509c;
        background-color: #87509c;
        position: relative;
      }
      .logo {
        position: absolute;
        top: 50px;
        background-image: url("logo.jpg");
        width: 117px;
        height: 40px;
        margin-left: 210;
        margin-top: 54;
      }
      ul {
        list-style-type: none;
        position: absolute;
        top: 47px;
        right: 10%;
      }
      ul, li {
        float: right;
        margin-left: 30px;
        padding: 10px;
        font-size: 12pt;
        color: white;
        font-family: tahoma;
      }
      .main_h2 {
        font-size: 32.16pt;
        color: white;
        text-align: center;
        position: absolute;
        top: 235px;
        left: 260px;
        width: 60%;
      }
      .first_button {
        position: absolute;
        top: 381px;
        left: 572px;
        background-color: #eb7d4b;
        color: white;
        padding: 10px;
        text-align: center;
        font-size: 8pt;
        height: 60px;
        width: 283;
      }
    </style>
  </head>
  <body>
    <div id="demo">
    </div>
    <div class="logo">
    </div>
    <ul>
      <li>WORK</li>
      <li>WORK</li>
      <li>BLOG</li>
      <li>CONTACT</li>
      <li>HOME</li>
    </ul>
    <div class="main_h2">
      Hi there! We are the new kids on the block 
      and we build awesome websites and mobile apps.
    </div>
    <button class="first_button">WORK WITH US!</button>
  </body>
</html>

＆＃13;

Answer 1

尝试这样的事情：

＆＃13;

#demo {
    width: 100%;
    height: 100%;
    border: 0.1px solid #87509c;
    background-color: #87509c;
}
.header {
    display: flex;
}
.logo {
    position: relative;
    top: 25px;
    left: 25px;
    background-image: url("logo.jpg");
    width: 117px;
    height: 40px;
    background-color: white;
}
ul {
    list-style-type: none;
}
ul, li {
    float: right;
    margin-left: 30px;
    padding: 10px;
    font-size: 12pt;
    color: white;
    font-family: tahoma;
}
.main_h2 {
    font-size: 32.16pt;
    color: white;
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    width: 60%;
    display: flex;
    flex-direction: column;
    transform: translate(-50%, -50%);
}
.first_button {
    position: relative;
    background-color: #eb7d4b;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 8pt;
    width: 283px;
    transform: translate(-50%);
    left: 50%;
    margin-top: 10px
}

＆＃13;

<body>
    <div id="demo">
        <div class="header">
            <div class="logo">
            </div>
            <div>
                <ul>
                    <li>WORK</li>
                    <li>WORK</li>
                    <li>BLOG</li>
                    <li>CONTACT</li>
                    <li>HOME</li>
                </ul>
            </div>
        </div>
        <div style="height:500px;">
            <div class="main_h2">
                Hi there! We are the new kids on the block 
                and we build awesome websites and mobile apps.
                <button class="first_button">WORK WITH US!</button>
            </div>
        </div>
    </div>
</body>

＆＃13;

如何垂直自动居中div子元素？

1 个答案: