[CSS] - CSS 부정 고도 구현 DIV 절대 가운데
9894 단어 css
일반적으로 높이 를 지정 한 DIV 는 수직 과 수평 가운데 가 비교적 편리 하고 높이 를 정 하지 않 으 면 조금 번 거 롭 습 니 다. 제 가 시도 해 보 았 습 니 다. 2 개의 보조 DIV 를 통 해 절대 가운데, IE 와 FF 등 표준 브 라 우 저 를 호 환 합 니 다.CSS 코드:
#wrapper
{
height
:
100%
;
width
:
100%
;
overflow
:
hidden
;
position
:
relative
; }
#wrapper[id]
{
display
:
table
;
}
#mid
{
position
:
absolute
;
top
:
50%
;
left
:
50%;
}
#mid[id]
{
display
:
table-cell
;
left
:
0
;
vertical-align
:
middle
;
position
:
static
; }
#box
{
position
:
relative
;
top
:
-50%
;
left
:
-50%
;
z-index
:
9999
;
width
:
300px;
}
#box[id]
{
left
:
0
;
margin
:
0 auto
;
}
div.boxstyle
{
border
:
2px solid #000000
;
text-align
:
center
;
padding
:
5px
;
}
XHTML 코드:
<
div
id
="wrapper"
>
<
div
id
="mid"
>
<
div
id
="box"
class
="boxstyle"
>
<
p
>
http://bolm.cn
</
p
>
<
p
>
DIV
</
p
>
</
div
>
</
div
>
</
div
>
간단하게 설명 하면 wrapper 는 외층 이 고 mid 는 중간 층 이 며 box 는 절대 가운데 층 입 니 다. FF 등 표준 브 라 우 저 에 서 는 wrapper 층 의 프 리 젠 테 이 션 방식 을 table, mid 층 을 table - cell 의 디 스 플레이 방식 으로 설정 할 수 있 습 니 다. 그러면 vertical - align: middle 을 사용 하여 중간 층 의 절대 수직 거 중 을 실현 할 수 있 고 IE 에 서 는 top: 50% 의 방식 과 뒤의 box 설정 의 상대 적 인 포 지 셔 닝 - 50% 를 사용 하여 수직 거 중 에 이 를 수 있 습 니 다.수평 이 가운데 에 있 는 방식 도 다 르 기 때문에 FF 는 margin 을 간단하게 설정 하여 실현 할 수 있 고 IE 는 left 가 서로 상쇄 하 는 방식 으로 이 루어 집 니 다. 또한 \ # box [id] 와 같은 표현 방식 은 FF 등 표준 브 라 우 저 만 알 고 있 기 때문에 FF 등 브 라 우 저 에 속 하 는 스타일 을 설정 할 수 있 습 니 다. box 의 높이 를 설정 하지 않 았 기 때문에 기본 값 은 auto 로 높이 를 정 하지 않 고 너비 도 같 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하는 방법은 무엇입니까?장치 너비가 특정 너비보다 크고 특정 너비보다 작을 때 웹 페이지 CSS 스타일을 변경하려면 @media의 미디어 쿼리 구문을 사용한 다음 구문을 작성하여 스타일의 최소 너비를 정의해야 합니다. 적용된 후 and라는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
