요소 및 텍스트 가운데 맞춤

하나.층의 가로 가운데

<style>

#div1{width:600px; height:600px;}

#div2{width:400px; height:200px;}

</style>

<div id="div1"> 
<div id="div_2"> div2 </div> 
</div>

div2를 div1에서 가로로 가운데로 배치하려면 다음과 같은 해결 방법이 있습니다.
1. IE에서 div1의 스타일을 설정합니다:text-align:center;이 방법은 IE8 이상 버전과 Firefox에서는 인풋 img 등 인라인 요소 가운데(display:inline;와display:inline-block; 그리고 유사한 효과를 가진 요소와 텍스트, 예를 들어 input img 등)에만 적용되며, 하위 요소 중의div,table 등은 display:block 효과 요소를 계승하여 텍스트를 가운데로 만들지만 용기 요소 자체는 가운데로 두지 않는다.
 
2.IE7 이상과 Firefox에서 div2 스타일을 설정합니다:margin:auto;디스플레이: Block 효과와 유사한 요소만 효력이 발생하고 디스플레이가 inline, inline-Block인 요소는 효력이 발생하지 않습니다. 보통div,table 등 위치에서 위치를 정하는 용기 요소에 사용되며 margin 스타일의 auto 효과는 가로 가운데를 차지하고 정수리를 설정합니다.
 
3. div2는position:absolute가 될 수 없습니다.절대 포지셔닝은 브라우저로 하여금 요소를 자동으로 조판할 수 없게 할 것이다.left,right 속성에 의존해야 한다.left:0,right:0을 명확하게 설정하지 않으면;
 
종합 이상:
 #div1{*text-align:center;  /* ie */}
#div2{margin:auto;display:block;
*display:inline;/* ie */*zoom:1;/* ie */
}
 
둘.레이어의 수직 가운데 맞춤
1. 가장 흔히 볼 수 있는 것은 표 요소의vertical-align:middle이다.css의vertical-align:middle;
css의vertical-align:middle;표의vertical-align과 달리 테이블의vertical-align:middle;셀의 컨텐트를 셀에서 세로 방향으로 가운데에 배치합니다.
css의vertical-align:middle;의 역할은 실제로 같은 줄 안에 인접한 내용을 수직으로 정렬하는 것이고 용기 요소의 배치와 관계가 없기 때문에 여기서 말하는 것은 수직으로 가운데에 있는 것이 아니라 수직으로 정렬하는 것이다.
css의vertical-align:middle;스타일은 inline-block에 작용하는 원소와 부모 원소 내의 텍스트나 조상 원소 내의 텍스트(이 조상 원소 내의 inline-block 원소가vertical-align 스타일을 설정하지 않았다면)를 수직 방향으로 정렬하는 방식입니다.
vertical-align은 후대 요소의 내용의 정렬 방식에 영향을 줄 수 없습니다.
vertical-align은 Block 요소에 작용하지 않습니다. 줄이 꺾여서 수직 방향에 정렬할 수 없기 때문입니다.tical-align이 inline 요소(예를 들어span)에 작용할 때 이 요소 자체가 같은 줄에 있는 inline-block 요소를 어떻게 정렬하는지 결정하고 동년배 요소나 텍스트의 정렬 방식에 영향을 주지 않는다. 이런 표현은vertical-align이 줄을 바꾸는 line-box 레이아웃에 영향을 주었기 때문에span은 line-box에 따라 바뀐다.tical-align 수치가text-top text-bottom일 때 정렬 방식은 텍스트와 관련된 inline-box 모델이고 inline-box 모델의 높이는 line-height(계승할 수 있는)에 의해 결정되며 content-area, top,bottom 몇 부분으로 나뉜다. 그 중에서 content-area는 문자의 크기에 따라 결정된다. 만약에 line-height가 크면 font-size가 작고 배경색을 더하면우리가 볼 수 있는 배경색 구역은 콘텐츠-area이다.text-top과text-bottom은 보이는 문자의 맨 끝과 맨 끝이 아니다(IE6-8은text-top과text-bottom을 렌더링할 때 콘텐츠-area의 맨 끝과 맨 끝을 정렬의 기준으로 잘못 사용한다).
자세한 설명은 여기를 참조하십시오.
http://www.zhangxinxu.com/wordpress/2010/06/css-vertical-align%E7%9A%84%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%EF%BC%88%E4%BA%8C%EF%BC%89%E4%B9%8Btext-top%E7%AF%87/
 
예를 들어 Firefo, chrome은 IE와 차이가 있습니다.

<div style="line-height:200px; border:1px solid #34538b;">
    <span style="font-size:60px; border:1px solid #a0b3d6; vertical-align:text-top;">     </span>        。
</div>

 

##================== test ==================

document.body.innerHTML = '<div id="conatiner" style="border: 1px solid red; width: 500px; height: 300px; text-align: left;">aaaaaaaaa<div style="border:1px solid blue;display:inline-block; vertical-align: bottom;"><div style="border: 1px solid green; width: 300px; height: 200px;  text-align: center; display: inline-block;display: inline-block;display: inline-block;display: inline-block;*display:inline;*zoom:1;margin:auto;display: inline-block;">12313123123<input type="button" style="margin:auto;display:inline-block;height: 40px;" value="click"><span style="background:#aaeeff;height: 40px;">hello world</span></div>8888</div>bbbbbbbbbb</div>';

##====================================

 
 
2. 테이블 요소로 수직 중심을 이루지 않으려면 IE8 이상 버전과 Firefox에서 디스플레이:table-cell;div를 테이블 셀로 표시하고 스타일을 다음과 같이 설정할 수 있습니다.
#div2{display: table-cell; vertical-align: middle;}, 그러나 IE6에서는 display: table-cell이 지원되지 않습니다.
3. 단행 텍스트일 경우 IE6를 호환하기 위해 설정된 줄 높이와div의 높이를 일치시킬 수 있습니다 #div2 {heigh:100px;line-height:100px;}
4. 여러 줄 텍스트에 대해 텍스트를 포함하는div의 높이가 고정되지 않으면 IE6와 호환하기 위해 top와bottom의padding을 같은 고정값으로 설정하고div는 텍스트 내용이 증가함에 따라 자동으로 높이를 변경합니다 #div2 {height:auto;padding:10px 0px;}
5. 마찬가지로 극중의 요소가 필요합니다. 만약position:absolute;top,bottom을 0으로 명확하게 설정해야 브라우저가 자동으로 레이아웃을 할 수 있기 때문에vertical-align 레이아웃 요소를 사용하면position:absolute를 설정하지 않는 것이 좋습니다
셋.절대 가운데
1. 백분율 편이와margin 마이너스 값을 이용하여 이 방법은 모든 요소에 적용되고 모든 브라우저와 호환된다

<style>

.div_1{
    position:relative;
    border: solid 1px red;     
    width:200px;
    height:200px;    
    background-color:silver;    
}
.content {
 position:absolute;
 top:50%;
 left:50%;   
 width:50px;
 height:50px;
 margin-top:-25px;
 margin-left:-25px;

/*    margin:50%; top:-25px; left:-25px; */

border:1px solid green;
}

</style>

<div class="div_1">
    <div class="content">
        Content here
    </div>
</div>

 
 
2. 절대 포지셔닝 0 편이와margin:auto를 이용한다., 양측 편이가 0으로 설정되었을 때,margin:auto는 내용을 가운데로 할 것입니다. 이 방법은 모든 요소에 적용됩니다. 이 방법은 IE8보다 낮은 브라우저를 호환하지 않습니다.

<style>

.div_1{
    position:relative;
    border: solid 1px red;     
    width:200px;
    height:200px;    
    background-color:silver;    
}

.content {
 position:absolute;

 left:0;
 right:0;
 top:0;
 bottom:0;
 margin:auto;
 height:50px;
 width:70%;
 border:1px solid green;
}

</style>

<div class="div_1">
    <div class="content">
        Content here
    </div>
</div>

 

 
3. 50% 오프셋과 음수 오프셋을 이용하여 모든 브라우저를 지원하고 오프셋 설정은 가운데에 있는 내용의 사이즈를 고려해야 한다(예를 들어 아래 200px)

<style>

.outer{
    position:relative;
    border:1px solid red;    
    width:400px;
    height:300px;
}

.cellOuter{
    position:absolute;
    top:50%;
    left:50%;    
    width:200px;
    height:200px;
    border:0px none;
    background:transparent;
}

.cellInner{
    position:absolute;

    top:-50%;

    left:-50%;  

    width:100%;
    height:100%;
    border:1px solid gray;   

}

</style>

<div class="outer">
    <div class="cellOuter">
        <div class="cellInner">hello cell</div>
    </div>
</div>

 
4,IE6,7하top,left는 50% 편이를 사용하는데 단점이 있다. IE7하에서는 중원소의width가 효력이 발생하지 않는다. 표준 CSS와 달리 IE6,7에서 하원소position:relative;top left를 설정할 때 백분율이 없지만 부모 원소의heightwidth를 설정하지 않으면 부모 원소는 하위 원소에서 벌어지기 때문에 top left의 50% 편이가 바로 자신의 사이즈의 50%입니다.

<div style="background:red;width:500px;height:500px;position:relative;">
   <div style="position:absolute;top:50%;left:50%;background:yellow;">
        <div style="background:green;position:relative; top:-50%; left:-50%;width:100px;height:100px;border:2px solid black;" >
                  my width ?
           </div>
   </div>
</div>

 
하지만 div를 한 층 더 끼워서 문제를 해결할 수 있다(ie 6 7 only)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .container{
            background:red;
            width:500px;
            height:300px;
            position:relative;
        }

        .holder{
            position:absolute;
            top:50%;
            left:50%;
            background:yellow;
        }

        .content-warp{
            background:green;
            position:relative; 
            top:-50%; 
            left:-50%;
        
            border:2px solid black;
        }
        .content{
            position: relative;
        }
    </style>
</head>
<body>
<div class="container">
   <div class="holder">
        <div class="content-warp" >            
            <div class="content">
                hello<br/>
                hello<br/>
                hello<br/>
                hello world<br/>
                hello<br/>
                hello<br/>
            </div>
        </div>
   </div>
</div>
</body>
</html>

 
 
 
 
넷.질문
기본적으로 블록 요소의 높이가 설정되지 않은 경우 블록 수준 요소의 폭은 최대값, 높이는 최소값으로 설정됩니다.IE6에서div내의 내용(텍스트와 요소)은div의 고폭(고폭의 값을 정의함)을 펼칠 수 있다. IE7이상 버전과 Firefox에는 이 문제가 존재하지 않는다. IE7이상 버전은min-heightmax-height,min-widthmax-width를 지원하기 때문에 IE7이나 Firefox 등 비교적 새로운 브라우저는min-heightmin-width로IE6에서 자동으로 원소를 키우는 효과를 얻을 수 있다.