div 의 자식 인 두 개의 div 요소 .main_h2및에 대해 자동 중심 값을 사용하려고합니다 . 부모와 자식 을 위해 사용하려고했지만 요소를 중앙에 넣을 수 없습니다..first_button#demoposition:relativeposition: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>다음과 같이 시도하십시오.
#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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다