부트 스트랩 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>Bootstrap의 그리드 시스템은 float: left, not을 사용 display:inline-block하므로 속성 vertical-align이 작동하지 않습니다. 나는 margin-top그것을 고치기 위해 시도했지만 이것이 반응 형 디자인에 좋은 해결책이 아니라고 생각합니다.
이 답변은 해킹을 제시하지만 현재 모든 곳에서 지원되므로 flexbox ( @Haschem 답변에 명시된대로)를 사용하는 것이 좋습니다 .
데모 링크 :
- 부트 스트랩 3
- 부트 스트랩 4 알파 (6)
필요할 때 사용자 정의 클래스를 계속 사용할 수 있습니다.
.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>...:). 이 추가 공간은 열 크기의 합이 최대 12 인 경우 그리드를 깨뜨립니다.
<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 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>요소는 그리드 시스템을 파괴, 레이아웃에 공간을 차지합니다.
참고 : Bootply가 업데이트되었습니다.
유연한 상자 레이아웃
CSS Flexible Box 의 출현으로 많은 웹 디자이너의 악몽 1 이 해결되었습니다. 가장 험난한 것 중 하나는 수직 정렬입니다. 이제 알려지지 않은 높이 에서도 가능합니다 .
"20 년에 걸친 레이아웃 해킹이 끝 나가고 있습니다. 내일은 아니지만 곧, 그리고 남은 생애 동안."
- CSS 전설 에릭 마이어 의 W3Conf 2013
Flexible Box (또는 간단히 Flexbox)는 레이아웃 용도로 특별히 설계된 새로운 레이아웃 시스템입니다. 사양 상태 :
플렉스 레이아웃은 표면적으로 블록 레이아웃과 유사합니다. 플로트 및 열과 같이 블록 레이아웃에서 사용할 수있는 더 복잡한 텍스트 또는 문서 중심 속성이 부족합니다. 그 대가로 공간을 배포하고 웹앱과 복잡한 웹 페이지에 자주 필요한 방식으로 콘텐츠를 정렬하기위한 간단하고 강력한 도구를 얻게됩니다.
이 경우 어떻게 도움이 될 수 있습니까? 어디 한번 보자.
세로로 정렬 된 열
Twitter Bootstrap을 사용하면 .row몇 가지 .col-*s가 있습니다. 우리가해야 할 일은 원하는 .row2 를 플렉스 컨테이너 상자 로 표시 한 다음 모든 플렉스 항목 (열)을 align-items속성에 따라 수직으로 정렬하는 것 입니다.
<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
플렉스 아이템 은 플렉스 컨테이너의 현재 라인의 교차 축 에서 유사
justify-content하지만 수직 방향으로 정렬 될 수 있습니다 .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 */
}
}
또는 다음 과 같이 특정 화면 크기 에만 지정할.vertical-align 수 있습니다.
/* 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" 를 클릭 하면 접두사가 붙은 CSS 선언 버전을 볼 수 있습니다 ( Autoprefixer 덕분에 ).
세로로 정렬 된 내용이있는 전체 높이 열
이전 데모 에서 볼 수 있듯이 열 (플렉스 항목)은 더 이상 컨테이너 (플렉스 컨테이너 상자, 즉 .row요소) 만큼 높지 않습니다 .
이는 속성 center값을 사용하기 때문입니다 align-items. 기본값 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 */
}
출력
색상 영역은 열 패딩 상자를 표시합니다.
마지막으로, 여기에있는 데모 및 코드 스 니펫은 목표를 달성하기위한 최신 접근 방식을 제공하기위한 다른 아이디어를 제공하기위한 것입니다. 실제 웹 사이트 나 애플리케이션에서이 접근 방식을 사용하려는 경우 " Big Alert "섹션에 유의하십시오 .
브라우저 지원을 포함한 추가 정보를 보려면 다음 리소스가 유용합니다.
- Mozilla 개발자 네트워크-유연한 상자
- Flexbox 가이드-CSS 트릭
- HTML5Rocks-Flexbox 퀵
- SmashingMagazine-Flexbox로 요소 중심 맞추기
- 필립 월튼-Flexbox로 해결
- 사용할 수 있습니까 : 유연한 상자 레이아웃 모듈
1. 반응 형 높이로 div 내부의 이미지를 수직으로 정렬 2. Twitter Bootstrap의 기본값을 변경하지 않도록 추가 클래스를 사용하는 것이 좋습니다 .row.
아래 코드가 저에게 효과적이었습니다.
.vertical-align {
display: flex;
align-items: center;
}
2018 업데이트
원래 질문은 Bootstrap 3에 대한 것이었지만 이제 Bootstrap 4가 출시되었으므로 수직 중앙에 대한 업데이트 된 지침이 있습니다.
중대한! 수직 중심은 부모 의 높이 에 상대적 입니다.
당신이 센터에 시도하는 요소의 부모가 더 정의한 경우 높이를 , 아무도 수직 중심 솔루션은 작동하지 않습니다!
부트 스트랩 4
이제 Bootstrap 4는 기본적으로 flexbox이므로 auto-margins , flexbox 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 수직 y 축의 여백을 나타내며 다음과 같습니다.
margin-top: auto;
margin-bottom: auto;
2-Flexbox가있는 수직 중앙 :
Bootstrap 4 .row는 이제 모든 열에서 수직으로 중앙에 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-디스플레이 유틸리티 데모를 사용한 수직 중앙
부트 스트랩 3
항목의 컨테이너에있는 Flexbox 메서드를 중앙에 배치 :
.display-flex-center {
display: flex;
align-items: center;
}
translateY 메서드 변환 :
.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;
}
div의 CSS에서 이것을 시도하십시오.
display: table-cell;
vertical-align: middle;
@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;
}
}
화면 해상도 당 다른 수의 열이 필요한 더 복잡한 레이아웃 (예 : -xs의 경우 2 행, -sm의 경우 3 행, -md의 경우 4 등)은 좀 더 고급 finagling이 필요하지만 -xs가있는 간단한 페이지의 경우 stacked 및 -sm 및 행이 더 크면 제대로 작동합니다.
허용 된 답변에 따라, 우려 사항 분리를 위해 또는 단순히 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으로 설정하기 때문에 부모 요소에서 글꼴 크기를 상속 할 수 없다는 것입니다.
David Walsh Vertical center CSS에 따라이 방법을 선호합니다 .
.children{
position: relative;
top: 50%;
transform: translateY(-50%);
}
는 transform필수적인 것은 아니다; 중심을 조금 더 정확하게 찾습니다. 결과적으로 Internet Explorer 8이 약간 덜 중심에있을 수 있지만 여전히 나쁘지는 않습니다.- Can I use-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;
}
Bootply 링크
높이 (특히 .v-center) 를 수정하고 필요에 따라 div를 제거 / 변경 div[class*='col-']해야 할 수 있습니다.
나는이 같은 문제에 부딪쳤다. 제 경우에는 외부 컨테이너의 높이를 몰랐지만 이것이 제가 수정 한 방법입니다.
먼저 html및 body요소 의 높이를 100 %가되도록 설정합니다 . 이것은 중요하다! 이것이 없으면 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
Less 버전의 Bootstrap을 사용하고 CSS로 직접 컴파일하는 경우 일부 유틸리티 클래스를 사용하여 Bootstrap 클래스와 함께 사용할 수 있습니다.
부트 스트랩 그리드 시스템의 응답 성 및 구성 가능성 (예 : -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>
테이블 및 테이블 셀이 필요하지 않습니다. 변환을 사용하여 쉽게 달성 할 수 있습니다.
예 : 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>다른 화면 크기에서 다른 열 크기를 혼합 할 때 더 쉽게 사용할 수 있도록 zessx의 답변 에 대해 조금 자세히 설명했습니다 .
Sass 를 사용하는 경우 다음을 scss 파일에 추가 할 수 있습니다.
@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부터 기본적으로 지원됩니다 . div에 추가 d-flex align-items-center합니다 row. 더 이상 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>
출처 : Flex · Bootstrap
좋아, 우연히 몇 가지 솔루션을 혼합했고 마침내 가장 작은 해상도로 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> 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 화면.
상대적 패딩 사용
즉, 패딩을 %로 지정하십시오.
Bootstrap 4 (현재 알파 버전)를 사용하면 .align-items-center클래스를 사용할 수 있습니다 . 따라서 부트 스트랩의 반응 형 특성을 유지할 수 있습니다. 나를 위해 바로 잘 작동합니다. Bootstrap 4 Documentation을 참조하십시오 .
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 요소를 한 행에 세로로 정렬하고 싶었던 동일한 상황에 부딪 쳤는데, 부트 스트랩 클래스 col-xx-xx가 div에 float : left로 스타일을 적용한다는 것을 알았습니다.
style = "Float : none"과 같은 div 요소에 스타일을 적용해야했고 모든 div 요소가 수직으로 정렬되기 시작했습니다. 다음은 작동하는 예입니다.
<div class="col-lg-4" style="float:none;">
JsFiddle 링크
누군가가 float 속성에 대해 더 많이 읽고 싶어하는 경우를 대비하여 :
W3Schools-플로트
참고 URL : https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3
'your programing' 카테고리의 다른 글
| Gradle에서 구현과 컴파일의 차이점은 무엇입니까? (0) | 2020.09.28 |
|---|---|
| Git 병합 마스터를 기능 브랜치로 (0) | 2020.09.28 |
| 목록에서 중복 제거 (0) | 2020.09.28 |
| std :: string을 const char * 또는 char *로 변환하는 방법은 무엇입니까? (0) | 2020.09.28 |
| SQL Server에서 작은 따옴표를 어떻게 이스케이프합니까? (0) | 2020.09.28 |