Как вертикально автоцентр элемента дочернего элемента?

-2

Я ищу, чтобы использовать значения автоцентра для двух элементов div .main_h2 и .first_button, которые являются дочерью div #demo. Я попытался использовать position:relative для родителя и position:absolute для ребенка, но не смог разместить элементы в центре.Как вертикально автоцентр элемента дочернего элемента?

Кодекс:

<!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>

источник

2016-04-01 Red Ali

Я думаю, уже тысячи вопросов и ответов об этом здесь, в stackoverflow и в Интернете в целом. Посмотрите [здесь] (https://css-tricks.com/centering-in-the-unknown/), например, или [здесь] (https://philipwalton.github.io/solved-by-flexbox/demos/vertical -центрация /) для решения flexbox – michaPau

Возможный дубликат [Горизонтальный центр div в div] (http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) –

Попробуйте что-то вроде этого:

#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 
 
}

<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>

источник

2016-04-01 12:11:12 Mosquito

Как вертикально автоцентр элемента дочернего элемента?

ответ

Смежные вопросы