사용자가 단추를 클릭 할 때 표시되는 양식과 함께 내 페이지에 많은 내용이 있습니다.flexbox를 사용하여 양식 요소 중앙에 배치
.container-column {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
이 양식을 중심으로하지만,이 방법의 문제는 시각적 호소력이되는, 그것은 아래로 내 콘텐츠의 나머지 부분을 밀어입니다 : 나는과 같이 인 flexbox 사용하여 양식을 중심으로 할 수 있습니다. 나는 z-index
of 999를 추가하려고 시도했지만 이것이 작동하지 않습니다. 나도 position:absolute
를 사용했다. 그러나 이것은 단지 왼쪽 위에 양식을 쌓아 둔다.
나머지 콘텐츠는 그대로두고 양식을 페이지의 중앙에 배치하는 간단한 방법이 있습니까? 나머지 콘텐츠를 오버레이하는 양식은 괜찮습니다.
Form
:
return (
<form className="container-column">
<div className="icon ion-ios-close-empty close-btn" onClick={() => this.props.signupBtnClick('close')}></div>
<input type="text" name="firstname" placeholder="firstname" className="form-element"></input>
<input type="text" name="lastname" placeholder="lastname" className="form-element"></input>
<input type="text" name="username" placeholder="username" className="form-element"></input>
<input type="password" placeholder="password" className="form-element"></input>
<input type="password" placeholder="repeat password" className="form-element"></input>
<input type="email" name="email" placeholder="email" className="form-element"></input>
<input type="submit" value="submit" className="form-element btn-form2"></input>
</form>
)
Form
다음과 같이 index
페이지에 사용되는 반응 성분이다
업데이트 요청이 하나 여기 관련 코드
return (
<div>
<section className="section-header">
<div className="container-row signup-login-btns">
<button className="btn btn-form1" onClick={() => this.renderLoginForm()}>Login</button>
<button className="btn btn-form2" onClick={() => this.renderSignupForm()}>Signup</button>
</div>
{this.state.showSignupForm ? <SignupForm signupBtnClick={(type) => this.onSignupClick(type)} />: null }
**other content, which gets pushed down once the form is shown**
관련 CSS 클래스 :
,451,515,.form-element {
border:none;
align-content:center;
text-align:center;
outline:none;
width: 400px;
height: 45px;
margin: 10px;
color: #7f8c8d;
font-size:120%;
border-radius:10px;
}
.section-header {
background: #d53369;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #d53369, #cbad6d);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #d53369, #cbad6d);
margin-top:0px;
padding-top:0px;
padding-bottom:5%;
}
이 그것을 해결! 정말 고맙습니다 (: – Frosty619