부정확한 원소의 폭이 높으면 css로 내용의 수평과 수직이 모두 가운데에 있습니다
6865 단어 css
부적합한 방안
text-align 및 line-height
분명히 text-align과line-height를 사용하는 방식은 한 줄의 문자에 적합하고 본고의 요구에 적합하지 않다.특히 라인하이트는 높이를 모르고 수직으로 가운데를 잡을 수 있다는 보장이 없다.그리고 아무리 글이라도 우리는 글이 몇 줄인지 모른다.
position: absolute, 50% 및 margin: -px
절대 다수의 상황에서 우리는 이런 방안을 고려하여 가운데에 있는 요소를 포지셔닝과margin을 마이너스로 하는 방법으로 수직 방향에서 가운데에 있게 할 수 있다.이런 방안은 부모 원소의 높이를 요구하지 않는다. 즉, 부모 원소의 높이가 바뀌어도 부모 원소의 수직 중심 위치를 유지할 수 있고 수평 방향은 같은 조작이다.그러나 여기서 문제가 하나 있다. 바로 우리의 수요는 내부적인 이 요소의 너비와 높이도 확실하지 않다는 것이다. 예를 들어 한 단락의 문자라면 이 단락의 글자 수가 얼마나 되는지 보장할 수 없기 때문에margin을 마이너스로 해서 편향시키는 것은 이런 상황에서 통하지 않는다.
position:fixed, 0 및 margin:auto
모달 다이어로그 팝업 상자를 만들려고 할 때, 예를 들어 화면에 있는 광고나 로그인 상자를 팝업합니다.이럴 때는 창이나 웹 페이지에 비해 가운데를 차지하는 방안을 고려할 수 있다.
this is a box fixed in center of screen
이 중에서 가장 중요한 것은margin:auto;,블록급 요소의 경우, 자신의 폭을 확정한 후,margin:auto는 Position:fixed에서라도 가운데에 있는 것을 도울 수 있습니다.그러나 반드시 중간에 있어야 하는 원소의 넓이와 높이를 규정해야 하기 때문에 우리의 수요를 만족시킬 수 없다.
position: absolute, 0 및 margin: auto
위의fixed 방안은 전체 창에서 가운데만 적용됩니다.fixed는 요소를 웹 페이지에서 벗어날 수 있기 때문에 내용 흐름에서는 적용되지 않습니다.컨텐트 흐름에서도 가운데 배치가 가능하려면 다음과 같이 하십시오.
This is a p
this is a box fixed in center of screen
우선 위의 방법을 모방해서 Margin:auto를 사용하고 absolute만 사용합니다.absolute 포지셔닝을 사용하면 부모 요소도position이 있어야 합니다. (static가 아닙니다.)그러니까inner는position이 있는 부모 요소에 놓여 있습니다.container.이렇게.inner 대.컨테이너는 중간이다.다음 문제는 어떻게 양보하는가이다.container는 내용과 같은 넓이를 갖추고 있습니다. 통과.container의 부모 요소는position:relative입니다.container는 absolute입니다. 100% 사용하십시오.container는 부모 요소의 넓이와 같으면 됩니다.같은 이치로 넓이를 설정해야 하기 때문에 우리의 수요를 만족시키지 못한다.
올바른 방안
display:table와vertical-align:middle
이 방안은 이해가 가장 쉽다. 테이블은 수직 거중의 속성을 갖추고 있기 때문에 속성을 통해 실현하기 쉽다.
you own content
이런 상황에서 우리는 마음대로 바꿀 수 있다.인너의 넓이가 높아서 내부의 내용이 여전히 중간 상태를 유지한다.
DEMO
position: absolute, 50% 및translate
css3에서translate 함수를 제공했는데 그 주요 역할은 위치를 바꾸어transform 속성에 전달하는 것이다.
your own content
html 코드는 위와 같습니다.translate(-50%, -50%)는 원소를 자신의 너비와 높이의 -50%로 이동시킨다.이런 방법은 사실 맨 위에서 부정된 Margin 마이너스 값의 용법과 마찬가지로 Margin 마이너스 값의 대체 방안이라고 할 수 있다.이렇게 하면 너는 매우 쉽게 이해할 수 있다.이 방법이 가장 강한 곳은 확실하지 않다는 것이다.인너의 넓이는.컨테이너의 넓이도 수동으로 설정할 필요가 없다. 그 자체가 커지면.이곳은 단지 시범을 보이기 위해서 특별히 넓이와 높이를 설정해 주었다.
DEMO
vw vh와translate
vh와 vw는 비교적 편향된 두 단위로'viewport의 height와 width의 1%'를 가리킨다. 예를 들어 50vh는 현재 뷰포트(창의 높이, 실험에 스크롤 바가 포함)의 높이의 50%이다.즉 1vw는 1%의 윈도우 너비와 차이가 많지 않은 값과 같다.그래서fixed에 사용할 때 더 잘 어울려요.
this is a box fixed in center of screen
사실 50%를 사용하는 것과 큰 차이가 없다. 왜냐하면 이때 top,left에서 얻은 50%는 부모 요소에 비해 margin,padding과 다르기 때문이다.Margin이 필요하지 않으면 여기서 변형을 파생시킬 수 있습니다.
.inner2 {
position:fixed;
top: 0;
left: 0;
margin: 50vh 0 0 50vw;
transform: translate(-50%, -50%);
}
vh vw는 창의 크기만 고려할 수 있으며 정상적인 텍스트 흐름에 적합하지 않습니다.그러나 때로는 매우 유용할 수 있다. 특히 전체 화면 응용 프로그램, 예를 들어full 페이지.나는 두 가지 방안을 모두 시연에 놓았으니, 너는 DEMO에서 볼 수 있다.
DEMO
: before 및 display: inline-block
이것도 위조: before를 통해 원소에 새로운 원소를 추가한 후 디스플레이: inline-block으로 높은 처리를 통해 원하는 효과를 얻을 수 있는 처리 방식이다.
this is a box fixed in center of screen
The second line
이 방안은 비교적 특별해서 이해하기 어렵다.먼저.컨테이너 수준이 중간입니다. 괜찮습니다.받다container 위조 클래스:before는height:100% 로 설정하여 위조 요소를 사용할 수 있습니다.container는 부모 요소와 같은 높은 공간을 얻을 수 있습니다.그리고 inline-block과vertical-align:middle로 정렬된 기선을 바꾸는 것에 대해 저도 잘 몰라요. 여기에 참고할 만한 글이 있어요.통과:before 이후,.container 내의 행급 요소의 정렬 기선은 가운데에 있는 위치로 가고 수직 가운데에 있는 정렬을 실현했다.이때 만약 안에 단지 한 줄의 문자만 있다면 사실은 쓰지 않아도 된다.inner, 그런데 위의 예에 하나
DEMO
css3 display:flex
css3는 레이아웃과 관련된 속성을 추가했습니다. 그 중에서 flex 레이아웃은 우리가 원하는 효과를 간단하게 실현할 수 있습니다.
this is a box fixed in center of screen
The second line
간단하게 설명하자면 디스플레이:flex일 때 이 용기 내부의 요소는 flex에 따라 배치된다는 것을 나타낸다.align-items:center는 이 원소들이 본 용기에 비해 수평으로 가운데에 있을 것임을 나타낸다.justify-content:center도 같은 이치로 수직으로 가운데에 있다.맞아요.container가 이 양식들을 부여한 후에 내부 요소로 사용합니다.인너가 자각적으로 중간에 섰다.그리고 여기서text-align:center를 사용하지 않았기 때문에..inner 안의 문자는 중간에 있지 않는다. 즉, 단지.인너라는 용기가 중간에 있을 뿐이야.
DEMO
총결산
위의 몇 가지 실행 가능한 방안은 크게 두 가지로 나눌 수 있는데 그것이 바로 디스플레이 정렬 방안,translate 위치 이동 방안이다.display 방안은 css의 레이아웃 특성을 충분히 발휘하고 레이아웃과 UI 엔진의 특성을 이용하여 레이아웃의 정렬 방식을 제어하는 것이다.한편,translate 방안은 위치를 이용한다. 먼저 50%의 위치를 통해position을 할 수도 있고margin vw vh를 할 수도 있다. 그러나 완성된 후에translate를 통해 원소를 되돌릴 수도 있다. 왜냐하면translate가 원소 자체에 비해 margin이 아니기 때문이다.
본문은 나의 블로그에 발표되었다http://www.tangshuang.net/319...만약 의문이나 부족한 점이 있으면 블로그에 글을 남겨 주십시오
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
