내가 배운 해결책 중 하나는 display의 부모 div 요소를 table-cell으로 설정하고 vertical-align 속성을 사용하는 것입니다.오른쪽 정렬 된 div에 세로로 가운데 맞춤 텍스트 상자
내 경우에는 부모 div가 오른쪽으로 떠 있어야하지만 테이블 셀 트릭이 깨져서 모든 것이 작동하지 않습니다.
제 질문은 간단합니다. 왜 이런 일이 정확히 일어 났으며, 무엇보다 내가 원하는 효과를 얻으려면 어떻게해야할까요?
CSS3는 flexbox를 제공합니다. 인 flexbox의
body {
display: flex; /* create flex container */
justify-content: flex-end; /* align child to right edge */
}
div {
display: flex; /* create nested flex container */
align-items: center; /* center child vertically */
height: 60px;
border: 1px solid red;
}<div>
<input>
</div>장점 : 당신이 필요로하는 모든이입니다
는 인 flexbox 방문에 대한 자세한 내용은 :
브라우저 지원 : 인 flexbox 모든 주요 브라우저, except IE 8 & 9에서 지원
. Safari 8 및 IE10과 같은 일부 최신 브라우저 버전은 vendor prefixes이 필요합니다. 필요한 모든 접두사를 빠르게 추가하려면 Autoprefixer을 사용하십시오. this answer에서 자세한 내용.
위대한 것 같습니다 ... 이제 나는 이것을 시도하고 일단 작동하면 받아 들일 것입니다 :) 또한 자기 학습을위한 링크에 대한 감사. – shole
랩의 모든
div {
/* float: right; uncomment this will make this not working */
display: table-cell;
vertical-align: middle;
height: 60px;
border: 1px solid red;
}<div>
<input>
</div>몇 가지 조작으로 피들을 업데이트했습니다. 희망이 당신을 위해 작동합니다. http://jsfiddle.net/53ALd/3780/
HTML을 확인하십시오 :
<div >
<input class="form-control" id="txtWOFastNavigation">
</div>
CSS :
div {
float: right;
height: 160px;
border: 1px solid #000;
position: relative;
background: red;
width: 104px;
}
div .form-control{
width: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
이 코드 데모이고 그것의 영업 제목, 나는 그것이 명확하게 텍스트 상자의 표시라고 생각한다. 또한 downvoters 왜 downvotes 말해 줄래? – shole
@Michael B 대답을 참조하십시오, 당신이 필요로하는 것 같아요. –