저는 CSS
을 처음 사용합니다. 그래서 이것은 아마도 기본적인 질문 일 것입니다. 그러나 나는 도처에서 수색을하고 완전히 멈췄습니다.div와 버튼을 정렬하고 모달 기능을 유지하십시오.
나는 div
과 두 개의 버튼이 있습니다. 버튼 하나가 모달을 엽니 다. 이 정도면 효과가 있습니다.
div
을 내 버튼 위에 수직으로 정렬시킬 수 없습니다. 모든 것을 새 부모 div에 넣으면 모달/버튼이 서로 겹쳐져 작동하지 않습니다.
내 코드는 여기에 있습니다 : https://jsfiddle.net/k3eL99ub/
<div id="page1" class="landing-page">
<a id="link-lp"></a>
<div class="logo-sketch">Logo here</div>
<button id="about-button">about</button>
<button id="work-button">work</button>
<div id="about-modal">
<div id="about-modal-content">
<span class="close">×</span>
<p class="about-text">stuff here</p>
</div>
</div>
</div>
.landing-page {
display: flex;
justify-content: center;
align-items: center;
}
.logo-sketch {
position: relative;
clear: both;
border: 2px solid black;
}
button {
display: inline;
border: none;
background: none;
outline: none;
font-family: Montserrat;
font-size: 1.3em;
text-decoration: none;
text-align: center;
cursor: pointer;
width: 10%;
}
.about-button {
float: left;
margin-right: 50px;
}
button.work-button {
float: right;
margin-left: 50px;
}
/*about modal styling*/
#about-modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
}
#about-modal-content {
background-color: #fff;
margin: auto;
padding: 20px;
border: 2px solid #000;
width: 50%;
text-align: left;
}
.close {
color: #000;
float: right;
font-size: 32px;
font-weight: bold;
}
.close:hover,
.close:focus {
text-decoration: none;
cursor: pointer;
}
감사합니다!
입니까? – Zvezdas1989
@ Zvezdas1989 예, 상단에 로고가 있고 아래에 버튼이 있어야합니다. 두 개의 버튼은 지금처럼 서로 옆에 있어야합니다. – user7875185
내가 당신을 위해 jsfiddle을 만들었습니까? – Zvezdas1989