IE에서 Flexbox가 세로로 가운데에 발생하지 않음
페이지 중앙에 일부 Lipsum 콘텐츠가있는 간단한 웹 페이지가 있습니다. 이 페이지는 Chrome 및 Firefox에서 작동합니다. 창 크기를 줄이면 콘텐츠가 창을 채울 수 없을 때까지 창을 채운 다음 스크롤 막대를 추가하고 화면에서 낮게 콘텐츠를 채 있습니다.
그러나 페이지는 IE11에서 중앙에 있지 않습니다. 본문을 구부리면 페이지가 IE의 중앙에 오도록 할 수 있도록 그렇게하면 콘텐츠가 화면에서 위쪽이 잘립니다.
다음은 두 가지 시나리오입니다. 관련 바이올린을 참조하십시오. 문제가 발생하지 않을 때까지 생성됩니다.
참고 :이 애플리케이션은 최신 버전의 Firefox, Chrome 및 IE (IE11) 대상으로하며, Flexbox 의 후보 권장 사항을 지원 하는 기능의 모든 문제가 없습니다 (이론상).
편집 : 전체 화면 API를 사용하여 외부 div를 전체 화면으로 표시하면 모든 브라우저가 원본 CSS를 사용하여 가운데에 배치됩니다. 그러나 전체 화면 모드를 종료하면 IE는 다시 가로로 가운데 정렬되고 세로로 위쪽으로 정렬됩니다.
편집 : IE11은 공급 업체가 아닌 Flexbox 구현을 사용합니다. 유연한 상자 ( "Flexbox") 레이아웃 업데이트
Chrome / FF에서 중심 및 크기가 조정되고, 중심이 아닌 IE11에서 크기 조정 됨
바이올린 : http://jsfiddle.net/Dragonseer/3D6vw/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
모든 곳에서 정확하게 중앙에 위치, 크기가 작을 때 상단이 잘림
바이올린 : http://jsfiddle.net/Dragonseer/5CxAy/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display: flex;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
즉, 최소 높이 스타일 만 설정 또는 높이 스타일이 전혀없는 경우 브라우저가 내부 컨테이너를 세로로 정렬하는 데가 있음을 발견했습니다. 내가 한 일은 약간의 가치를 높이 스타일을 추가하고 문제를 해결하는 것이 었습니다.
예 :
.outer
{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* Center vertically */
align-items: center;
/*Center horizontaly */
justify-content: center;
/*Center horizontaly ie */
-ms-flex-pack: center;
min-height: 220px;
height:100px;
}
이제 높이 스타일이 최소 높이가이를 사용합니다. 그렇게하면 행복하고 우리는 여전히 min-height를 사용할 수 있습니다.
이것이 누군가에게 도움이되기를 바랍니다.
flexboxed flex-direction: column
컨테이너에서 flexboxed div를 래핑하십시오 .
방금 IE11에서 테스트 작동합니다. Microsoft는 이상한 수정을 외부로 생성하는 것이 필요합니다!
HTML :
<div class="FlexContainerWrapper">
<div class="FlexContainer">
<div class="FlexItem">
<p>I should be centered.</p>
</div>
</div>
</div>
CSS :
html, body {
height: 100%;
}
.FlexContainerWrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.FlexContainer {
align-items: center;
background: hsla(0,0%,0%,.1);
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
width: 600px;
}
.FlexItem {
background: hsla(0,0%,0%,.1);
box-sizing: border-box;
max-width: 100%;
}
IE11에서 테스트 할 수있는 2 가지 예 : http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/
누군가가 내가 가진 것과 동일한 문제로 여기에 올 경우를 대비하여 이전 의견에서 예시를 다루지 않습니다.
나는 margin: auto
그것이 부모 (또는 외부 요소)의 바닥에 달라 붙도록 내부 요소를 가졌 습니다. 나를 위해 그것을 고친 것은 여백을 margin: 0 auto;
.
이것은 Microsoft에서 내부적으로 수정 된 장치입니다.
내 작업 솔루션 (SCSS)은 다음과 같습니다.
.item{
display: flex;
justify-content: space-between;
align-items: center;
min-height: 120px;
&:after{
content:'';
min-height:inherit;
font-size:0;
}
}
두 바이올린을 모두 업데이트했습니다. 나는 그것이 당신의 일을 끝내기를 바랍니다.
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
margin: 0 auto;
}
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display:flex;
}
.outer
{
min-width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
margin-top:40px;
margin: 0 auto;
}
나는 경험이 많지 Flexbox
않지만 html
및 body
태그 의 강제 높이로 인해 크기를 조정할 때 텍스트가 상단에서 사라지는 것 같습니다 .IE에서 테스트 할 수 없었지만 Chrome에서 동일한 효과를 발견했습니다.
나는 당신의 바이올린을 포크하고 height
및 width
선언을 제거했습니다 .
body
{
margin: 0;
}
flex
다른 flex
요소 에도 설정을 적용해야하는 것 같았습니다 . 그러나 적용 display: flex
받는 .inner
인해 발생하는 문제 나 명시 적으로 설정할 수 있도록 .inner
로 display: block
하고, 설정 .outer
에 flex
위치합니다.
.outer
뷰포트를 채우기 위한 최소 높이 display: flex
,를 설정하고 수평 및 수직 정렬을 설정합니다.
.outer
{
display:flex;
min-height: 100%;
min-height: 100vh;
align-items: center;
justify-content: center;
}
나는 명시 적으로 설정 .inner
했다 display: block
. 이 상속처럼 크롬, 그것은 모습 flex
에서 .outer
. 너비도 설정했습니다.
.inner
{
display:block;
width: 80%;
}
이것은 Chrome에서 문제를 해결했으며 IE11에서도 동일하게 수행되기를 바랍니다. 내 버전의 바이올린은 다음과 같습니다. http://jsfiddle.net/ToddT/5CxAy/21/
나를 위해 일한 좋은 솔루션을 찾았습니다.이 링크를 확인하십시오. https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 먼저 부모 div를 추가하고 두 번째로 min-height : 100 %를 min-으로 변경합니다. 높이 : 100vh. 매력처럼 작동합니다.
// by having a parent with flex-direction:row,
// the min-height bug in IE doesn't stick around.
.flashy-content-outer {
display:flex;
flex-direction:row;
}
.flashy-content-inner {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-width:100vw;
min-height:100vh;
padding:20px;
box-sizing:border-box;
}
.flashy-content {
display:inline-block;
padding:15px;
background:#fff;
}
부모의 너비와 높이를 정의 할 수 있다면 컨테이너를 만들지 않고도 이미지를 중앙 집중화 할 수있는 더 간단한 방법이 있습니다.
어떤 이유로 최소 너비를 정의하면 IE는 최대 너비도 인식합니다.
이 솔루션은 IE10 +, Firefox 및 Chrome에서 작동합니다.
<div>
<img src="http://placehold.it/350x150"/>
</div>
div {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid orange;
width: 100px;
height: 100px;
}
img{
min-width: 10%;
max-width: 100%;
min-height: 10%;
max-height: 100%;
}
https://jsfiddle.net/HumbertoMendes/t13dzsmn/
참고 URL : https://stackoverflow.com/questions/19371626/flexbox-not-centering-vertically-in-ie
'IT' 카테고리의 다른 글
ASP.NET Web API에서 HTML 반환 (0) | 2020.08.09 |
---|---|
Android 애플리케이션에서 datetime이 'now'로 집합 SQLite 레코드를 삽입하는 방법은 무엇입니까? (0) | 2020.08.09 |
둘 이상의 리소스를 "사용"하면 리소스 누수가 수 있습니까? (0) | 2020.08.09 |
유효한 정수인지 테스트 (0) | 2020.08.09 |
자바 펼쳐가 입력에 점점이 맞는지 감지 (0) | 2020.08.09 |