부트스트랩3과 수직 정렬
3을 Twitter Bootstrap 3을 세로로 할 때 .div예를 들어: JSFiddle 링크:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>은 ""를 합니다.float: left 아니라, 이에요.display:inline-block 「」, 「」는, 「」vertical-align동작하지 않습니다.는 는는그용사 i를 사용해 보았다.margin-top고쳐야 하는데 반응성이 좋은 디자인은 아닌 것 같아요.
이 답변은 해커가 됩니다만, 현재는 어디에서나 서포트되고 있기 때문에, flexbox(@Haschem answer에 기재된 바와 같이)를 사용하는 것을 강하게 추천합니다.
필요에 따라서 커스텀클래스를 사용할 수 있습니다.
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}<div class="row">
<div class="col-xs-5 col-md-3 col-lg-1 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>「」를 사용합니다.inline-block를 들면, 「」등)를 하면, 합니다....</div> </div>...되면 이 은 그리드를
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
here, here, 기 사이에 .<div class="[...] col-lg-2"> ★★★★★★★★★★★★★★★★★」<div class="[...] col-lg-10">(2/8).★★★★★★★★★★★★。
이 여분의 공간을 걷어차자!!
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
쓸모없을 것 같은 코멘트에 주의해 주세요.<!-- ... -->? 그것들은 중요합니다--그것들이 없으면, 그 사이의 공백은<div>요소가 레이아웃의 공간을 차지하여 그리드 시스템이 중단됩니다.
주의: 부트플리가 업데이트되었습니다.
유연한 박스 레이아웃
CSS Flexible Box의 등장으로 웹 디자이너의 악몽은1 상당 부분 해소되었습니다.가장 날렵한 것 중 하나는 수직 정렬입니다.지금은 미지의 높이에서도 가능합니다.
"20년간의 레이아웃 해킹이 끝나가고 있습니다.내일이 아니라 곧, 그리고 우리의 남은 인생 동안.
Flexible Box(요컨대 Flexbox)는 레이아웃용으로 특별히 설계된 새로운 레이아웃 시스템입니다.사양은 다음과 같습니다.
플렉스 레이아웃은 표면적으로 블록 레이아웃과 유사합니다.여기에는 플로트나 열과 같이 블록 레이아웃에 사용할 수 있는 보다 복잡한 텍스트 또는 문서 중심 특성이 많이 없습니다.그 대신 웹 애플리케이션 및 복잡한 웹 페이지에 자주 필요한 방식으로 공간을 분배하고 컨텐츠를 정렬할 수 있는 단순하고 강력한 도구를 얻을 수 있습니다.
이 경우 어떻게 도움이 될까요?글쎄요, 어디 봅시다.
수직 정렬된 열
하면 Twitter Bootstrap을 사용할 수 ..row조금 있다.col-*한 됩니다. 필요한 것은 원하는 것을 표시하는 것 뿐입니다..row2 플렉스 컨테이너 박스로 만든 다음 모든 플렉스 항목(기둥)을 특성별로 수직으로 정렬합니다.
예 (댓글을 잘 읽어주세요)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
출력
색상 영역에는 열의 패딩 상자가 표시됩니다.
에 대해 명확히 align-items: center
플렉스 항목은 플렉스 용기의 현재 라인의 십자 축에 수직 방향과 유사하지만 정렬할 수 있습니다.
align-items익명 플렉스 항목을 포함하여 플렉스 컨테이너의 모든 항목에 대한 기본 정렬을 설정합니다.
align-items: center;중심 값별로 플렉스 항목의 여백 상자는 선 내에서 십자 축의 중심에 위치합니다.
큰 경고
중요사항 #1: Twitter Bootstrap은 다음을 지정하지 않습니다.width를 하지 않는 한, 의 수.col-xs-#이치노
에서는 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.col-xs-* , 「」를 합니다.width이치노
또는 Flexbox 레이아웃을 단순히 변경하는 것만으로 끌 수도 있습니다.display: flex;로로 합니다.display: block;특정 화면 크기로.§:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
또는 다음과 같은 특정 화면 크기에서만 지정할 수 있습니다.
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
그런 경우라면 @KevinNelson의 접근방식으로 하겠습니다.
주의 #2: 간결하기 때문에 벤더 프리픽스가 생략되어 있습니다.이 기간 동안 Flexbox 구문이 변경되었습니다.새로 작성된 구문은 이전 버전의 웹 브라우저에서는 작동하지 않습니다(Internet Explorer 9에서는 작동하지 않습니다).Flexbox는 Internet Explorer 10 이상에서 지원됩니다).
, -, 음, 음, 음, 다, 다, 다, -, -, -, -, -, -, -, -, -, -, -, -, -, -, -, -, -, -, -, -, -, -display: -webkit-box이치노
데모에서 "Toggle Compiled View"를 클릭하면 (Autoprefixer 덕분에) CSS 선언의 접두사 버전이 표시됩니다.
세로 방향으로 정렬된 콘텐츠가 있는 풀 하이트 열
이전 데모에서 보셨듯이 열(플렉스 항목)은 더 이상 컨테이너(플렉스 컨테이너 박스)만큼 높지 않습니다..row□□□□□□□□★
'아까워서'를 사용하기 입니다.centeralign-items유 the . 기본값은 음음음음음음음음 음음음음 음음음음 음 is is is is 。stretch항목이 상위 요소의 전체 높이를 채울 수 있도록 합니다.
수정하기 , 은 이 문제를 해결하기 위해 이 문제를 더하면 .display: flex;컬럼에도 적용됩니다.
예 (다시 한 번 코멘트에 주의해 주세요)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
출력
색상 영역에는 열의 패딩 상자가 표시됩니다.
마지막으로 이 데모와 코드 스니펫은 목표를 달성하기 위한 현대적인 접근 방식을 제공하기 위한 것입니다.실제 웹 사이트 또는 응용 프로그램에서 이 방법을 사용하는 경우 "대규모 경고" 섹션을 참고하십시오.
브라우저 지원을 포함한 자세한 내용은 다음 자료를 참조하십시오.
- Mozilla 개발자 네트워크 - 플렉시블 박스
- Flexbox 가이드 - CSS의 요령
- HTML5 Rocks - Flexbox 퀵
- Smashing Magazine - Flexbox를 사용한 요소 센터링
- Philip Walton - Flexbox에 의한 해결
- 사용 가능: 플렉시블 박스 레이아웃 모듈
1. div 내부의 이미지를 응답 높이에 수직으로 정렬합니다. 의 2를 하지 않기 위해 Twitter Bootstrap의 디폴트를 변경하지 않기 위해 추가 클래스를 사용하는 것이 좋습니다..row.
업데이트 2020
원래 질문은 Bootstrap 3에 대한 것이었지만, Bootstrap 4가 출시되었기 때문에 Vertical Center에 대한 업데이트된 가이던스를 알려드리겠습니다.
중요한! 수직 중심은 부모 높이에 상대적입니다.
중심에 두려는 요소의 부모에 정의된 높이가 없는 경우 수직 중심 조정 솔루션이 모두 작동하지 않습니다.
부트스트랩 4
Bootstrap 4는 디폴트로는 플렉스박스이므로 auto-margins, flexbox utils, 디스플레이 utils 및 수직 정렬 utils 등 다양한 방법으로 수직 정렬을 수행할 수 있습니다.처음에는 "수직 정렬 유틸리티"가 명백한 것처럼 보이지만, 이러한 유틸리티는 인라인 및 테이블 디스플레이 요소에서만 작동합니다.Bootstrap 4 수직 센터링 옵션은 다음과 같습니다.
1 - 자동 여백을 사용한 수직 중심:
의 또 다른 으로는 '수직중심으로 하다'를 이 있습니다.my-auto이렇게 하면 요소가 컨테이너 안에 중앙에 배치됩니다.를 들어, 「」라고 하는 것은,h-100하이트로 또, 행은 풀 하이트로 합니다.my-auto수직방향으로 중심을 잡습니다.col-sm-12★★★★★★ 。
<div class="row h-100">
<div class="col-sm-12 my-auto">
<div class="card card-block w-25">Card</div>
</div>
</div>
my-auto는 수직 과 같습니다.
margin-top: auto;
margin-bottom: auto;
2 - Flexbox를 사용한 세로 중심:
.row is금 is is이다display:flex 간단하게 사용하시면 .align-self-center수직의 중심을 잡기 위해 어떤 기둥에서도...
<div class="row">
<div class="col-6 align-self-center">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
""를 사용합니다.align-items-center.row로 정렬하다col-*★★★★★★★★★★★…
<div class="row align-items-center">
<div class="col-6">
<div class="card card-block">
Center
</div>
</div>
<div class="col-6">
<div class="card card-inverse card-danger">
Taller
</div>
</div>
</div>
3 - 디스플레이 유틸리티를 사용한 세로 중심:
부트스트랩4 에는, 다음의 경우에 사용할 수 있는 디스플레이 유틸리티가 있습니다.display:table,display:table-cell,display:inline세로 정렬 유틸리티와 함께 사용하여 인라인, 인라인 블록 또는 테이블 셀 요소를 정렬할 수 있습니다.
<div class="row h-50">
<div class="col-sm-12 h-100 d-table">
<div class="card card-block d-table-cell align-middle">
I am centered vertically
</div>
</div>
</div>
부트스트랩 4 - 디스플레이 유틸리티를 사용한 수직 중심 데모
다음 항목도 참조해 주세요.부트스트랩 4의 수직 정렬 중심
부트스트랩 3
중앙에 배치할 항목의 컨테이너에 있는 Flexbox 메서드:
.display-flex-center {
display: flex;
align-items: center;
}
변환 Y 메서드:
.transform-center-parent {
position: relative;
transform-style: preserve-3d;
}
.transform-center {
position: relative;
top: 50%;
transform: translateY(-50%);
}
인라인 방식 표시:
.display-inline-block {
display: inline;
}
.display-inline-block > div {
display: inline-block;
float: none;
vertical-align: middle;
}
아래 코드가 유효했습니다.
.vertical-align {
display: flex;
align-items: center;
}
div의 CSS에서 다음을 시도합니다.
display: table-cell;
vertical-align: middle;
수락된 답변에 따라 마크업을 커스터마이즈하지 않거나 관심사를 분리하거나 단순히 CMS를 사용한다는 이유만으로 다음 솔루션이 올바르게 작동합니다.
.valign {
font-size: 0;
}
.valign > [class*="col"] {
display: inline-block;
float: none;
font-size: 14px;
font-size: 1rem;
vertical-align: middle;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>행이 공백 공간을 제거하기 위해 글꼴 크기를 0으로 설정하기 때문에 부모 요소에서 글꼴 크기를 상속할 수 없습니다.
@media에 익숙하지 않은 사람이 스스로 문의하는 데 도움이 될 수 있도록 '솔루션'을 공유하려고 합니다.
@HashemQolami의 답변 덕분에 모바일용 col-*를 스택하여 중앙에 세로방향으로 정렬하여 표시할 수 있도록 col-* 클래스와 같은 모바일용 미디어 쿼리를 작성했습니다.
<div class='row row-sm-flex-center'>
<div class='col-xs-12 col-sm-6'></div>
<div class='col-xs-12 col-sm-6'></div>
</div>
.
.row-xs-flex-center {
display:flex;
align-items:center;
}
@media ( min-width:768px ) {
.row-sm-flex-center {
display:flex;
align-items:center;
}
}
@media ( min-width: 992px ) {
.row-md-flex-center {
display:flex;
align-items:center;
}
}
@media ( min-width: 1200px ) {
.row-lg-flex-center {
display:flex;
align-items:center;
}
}
화면 해상도당 다른 열 수(-x의 경우 2줄, -sm의 경우 3줄, -md의 경우 4줄 등)를 필요로 하는 복잡한 레이아웃에서는 보다 고도의 마무리 작업이 필요하지만, -xs의 스택과 -sm 이상의 행이 있는 단순한 페이지의 경우 이 방법은 문제 없습니다.
나는 David Walsh Vertical Center CSS에 따라 이 방법을 선호한다.
.children{
position: relative;
top: 50%;
transform: translateY(-50%);
}
transform꼭 필요한 것은 아닙니다. 단지 중심을 조금 더 정확하게 찾을 뿐입니다.그 결과 Internet Explorer 8의 중심은 다소 낮아질 수 있지만, 여전히 나쁘지 않습니다 - 사용할 수 있나요 - Transforms 2d.
이게 제 해결책입니다.이 클래스를 CSS 콘텐츠에 추가합니다.
.align-middle {
display: flex;
justify-content: center;
align-items: center;
}
HTML은 다음과 같습니다.
<div class="col-xs-12 align-middle">
<div class="col-xs-6" style="background-color:blue;">
<h3>Item</h3>
<h3>Item</h3>
</div>
<div class="col-xs-6" style="background-color:red;">
<h3>Item</h3>
</div>
</div>
.align-middle {
display: flex;
justify-content: center;
align-items: center;
}<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 align-middle">
<div class="col-xs-6" style="background-color:blue;">
<h3>Item</h3>
<h3>Item</h3>
</div>
<div class="col-xs-6" style="background-color:red;">
<h3>Item</h3>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>난 그냥 이렇게 했는데 내가 원하는 대로 되는 거야.
.align-middle {
margin-top: 25%;
margin-bottom: 25%;
}
그리고 이제 내 페이지는
<div class='container-fluid align-middle'>
content
+--------------------------------+
| |
| +--------------------------+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| +--------------------------+ |
| |
+--------------------------------+
현재 선택된 답변 이외의 브라우저가 아닌 Chrome을 사용하는 경우 다음 코드가 제대로 작동한다는 것을 알 수 있습니다.
.v-center {
display:table!important; height:125px;
}
.v-center div[class*='col-'] {
display: table-cell!important;
vertical-align:middle;
float:none;
}
.v-center img {
max-height:125px;
}
부트플라이 링크
으로는) 해야 할 수 ..v-center div/를 삭제div[class*='col-']니즈에 맞게.
저도 같은 문제에 부딪혔어요.제 경우, 외부 컨테이너의 높이를 몰랐지만, 다음과 같이 수정했습니다.
★★★★★★★★★★★★★★★★★★★★★★★★★★★★의 높이를 설정합니다.html ★★★★★★★★★★★★★★★★★」body100%의 without ! 이게 게게없 the the the the the the the the?html ★★★★★★★★★★★★★★★★★」body단순히 아이들의 키를 물려받을 뿐이다.
html, body {
height: 100%;
}
그 후 외부 컨테이너 클래스를 수강했습니다.
.container {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
마지막으로 클래스 포함 내부 컨테이너:
.inner-container {
display: table-cell;
vertical-align: middle;
}
HTML은 다음과 같이 심플합니다.
<body>
<div class="container">
<div class="inner-container">
<p>Vertically Aligned</p>
</div>
</div>
</body>
콘텐츠를 세로로 정렬하는 데 필요한 것은 이것뿐입니다.바이올린으로 확인:
Jsfiddle
테이블 셀이나 테이블 셀은 필요 없습니다.변환을 사용하면 쉽게 달성할 수 있습니다.
예: http://codepen.io/arvind/pen/QNbwyM
코드:
.child {
height: 10em;
border: 1px solid green;
position: relative;
}
.child-content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
<div class="col-xs-6 col-lg-6 child">
<div class="child-content">
<div style="height:4em;border:1px solid #000">Big</div>
</div>
</div>
<div class="col-xs-6 col-lg-6 child">
<div class="child-content">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
</div>부트스트랩의 Less 버전을 사용하여 직접 CSS로 컴파일하는 경우 일부 유틸리티 클래스를 사용하여 부트스트랩 클래스에서 사용할 수 있습니다.
를 들어, 「」를 사용하는 경우)에는, 이러한 동작하고 있는 것을 알 수 .-md ★★★★★★★★★★★★★★★★★」-sm). 단, 의 모든 높이를 열이 할 수 있습니다 단, 특정 행의 모든 열이 동일한 수직 높이를 갖도록 합니다(그러면 해당 내용을 수직으로 정렬하고 행의 모든 열이 공통의 가운데를 공유하도록 할 수 있습니다).
CSS / 이하:
.display-table {
display: table;
width: 100%;
}
.col-md-table-cell {
@media (min-width: @screen-md-min) {
display: table-cell;
vertical-align: top;
float: none;
}
}
.col-sm-table-cell {
@media (min-width: @screen-sm-min) {
display: table-cell;
vertical-align: top;
float: none;
}
}
.vertical-align-middle {
vertical-align: middle;
}
HTML:
<div class="row display-table">
<div class="col-sm-5 col-sm-table-cell vertical-align-middle">
...
</div>
<div class="col-sm-5 col-sm-table-cell vertical-align-middle">
...
</div>
</div>
화면 크기에 따라 다른 컬럼 크기를 혼합할 때 사용하기 쉽도록 zessx의 답변에 대해 조금 상세하게 설명했습니다.
Sass를 사용하는 경우 sss 파일에 다음 항목을 추가할 수 있습니다.
@mixin v-col($prefix, $min-width) {
@media (min-width: $min-width) {
.col-#{$prefix}-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
}
@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);
그러면 다음 CSS가 생성됩니다(Sass를 사용하지 않는 경우 스타일시트에서 직접 사용할 수 있습니다).
@media (min-width: 1200px) {
.col-lg-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 992px) {
.col-md-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 768px) {
.col-sm-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
@media (min-width: 480px) {
.col-xs-v {
display: inline-block;
vertical-align: middle;
float: none;
}
}
이제 응답 열에서 다음과 같이 사용할 수 있습니다.
<div class="container">
<div class="row">
<div class="col-sm-7 col-sm-v col-xs-12">
<p>
This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
</p>
</div><div class="col-sm-5 col-sm-v col-xs-12">
<p>
This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
</p>
</div>
</div>
<div class="row">
<div class="col-md-7 col-md-v col-sm-12">
<p>
This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
</p>
</div><div class="col-md-5 col-md-v col-sm-12">
<p>
This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
</p>
</div>
</div>
</div>
Flex Bootstrap 4 부트스트랩 4 입니다.d-flex align-items-center row contentdiv를 변경할 . CSS를 사용하다
간단한 예: http://jsfiddle.net/vgks6L74/
<!-- language: html -->
<div class="row d-flex align-items-center">
<div class="col-5 border border-dark" style="height:10em"> Big </div>
<div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>
예를 들어 http://jsfiddle.net/7zwtL702/ 입니다.
<!-- language: html -->
<div class="row d-flex align-items-center">
<div class="col-5">
<div class="border border-dark" style="height:10em">Big</div>
</div>
<div class="col-2">
<div class="border border-danger" style="height:3em">Small</div>
</div>
</div>
네, 우연히 몇 가지 솔루션을 혼합했습니다.최소 해상도로 Bootstrap 컬럼으로 3x3 테이블을 작성하려고 했습니다.
/* Required styles */
#grid a {
display: table;
}
#grid a div {
display: table-cell;
vertical-align: middle;
float: none;
}
/* Additional styles for demo: */
body {
padding: 20px;
}
a {
height: 40px;
border: 1px solid #444;
}
a > div {
width: 100%;
text-align: center;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="grid" class="clearfix row">
<a class="col-xs-4 align-center" href="#">
<div>1</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>2</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>3</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>4</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>5</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>6</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>7</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>8</div>
</a>
<a class="col-xs-4 align-center" href="#">
<div>9</div>
</a>
</div>에서는, 「」를 사용할 수 .align-items-center. , 플렉스의 경우 : 의 플렉스박스 용기의 align-items 유틸리티를 사용하여 십자축(시작할 Y축, 플렉스 방향의 경우 x축: 열)의 플렉스 항목의 정렬을 변경합니다.시작, 종료, 중심, 기준선 또는 스트레치 중에서 선택합니다(브라우저 기본값).
<div class="d-flex align-items-center">
...
</div>
div{
border: 1px solid;
}
span{
display: flex;
align-items: center;
}
.col-5{
width: 100px;
height: 50px;
float: left;
background: red;
}
.col-7{
width: 200px;
height: 24px;
float: left;
background: green;
} <span>
<div class="col-5">
</div>
<div class="col-7"></div>
</span>이거 드셔보세요.
.exe {
font-size: 0;
}
.exe > [class*="col"] {
display: inline-block;
float: none;
font-size: 14px;
font-size: 1rem;
vertical-align: middle;
}<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row exe">
<div class="col-xs-5">
<div style="height:5em;border:1px solid grey">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid red">Small</div>
</div>
</div>여기에는 몇 가지 방법이 있습니다.
사용하다
display: table-cell; vertical-align: middle;컨테이너의 CSS를 대상으로 합니다.
display: table;화면 크기에 따라 패딩을 변경하려면 미디어 스크린과 함께 패딩을 사용합니다.자세한 내용은 Google @media 화면을 참조하십시오.
상대 패딩 사용
즉, % 단위로 패딩을 지정합니다.
에서는, 「」4( 「」)를 할 수 ..align-items-centerBootstrap의 반응성이 뛰어난 캐릭터를 유지할 수 있습니다.난 바로 잘 될 거야.부트스트랩4 의 메뉴얼을 참조해 주세요.
HTML
<div class="row">
<div class="col-xs-2 pull-bottom"
style="height:100px;background:blue">
</div>
<div class="col-xs-8 pull-bottom"
style="height:50px;background:yellow">
</div>
</div>
CSS
.pull-bottom {
display: inline-block;
vertical-align: bottom;
float: none;
}
이거 드셔보세요
<div class="d-flex align-items-center">
...
</div>
여기서부터의 해결책에 많은 시간을 들였지만, 어느 것도 도움이 되지 않았습니다.몇 시간 후, BS3의 어떤 아이 엘리먼트의 중심을 잡을 수 있다고 생각합니다.
CSS
.vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
}
HTML
<div class="col-md-6 vertical-center">
<div class="container">
<div class="row">
</div>
</div>
</div>
같은 상황에서 몇 개의 div 요소를 세로로 정렬하고 싶더니 Bootstrap class col-xx-xx가 div에 float: left로 스타일을 적용합니다.
스타일 등의 디브 요소에 스타일을 적용해야 했어요="float:none"을 선택하면 모든 div 요소가 수직으로 정렬되기 시작합니다.다음으로 작업 예를 제시하겠습니다.
<div class="col-lg-4" style="float:none;">
JsFiddle 링크
float property에 대해 자세히 알고 싶은 경우:
W3 Schools - 플로트
언급URL : https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3
'programing' 카테고리의 다른 글
| 코드 내에 Python 모듈을 설치하는 방법은 무엇입니까? (0) | 2023.04.14 |
|---|---|
| Objective-C에서 여러 파라미터를 전달하려면 어떻게 해야 합니까? (0) | 2023.04.14 |
| 다른 cmd.exe 프롬프트에서 새 cmd.exe 창을 만듭니다. (0) | 2023.04.14 |
| 텍스트 영역의 크기 조정 가능한 속성을 비활성화하려면 어떻게 해야 합니까? (0) | 2023.04.09 |
| SQL Server 쿼리에 테이블 구조를 표시하려면 어떻게 해야 합니까? (0) | 2023.04.09 |