[CSS] 가운데(중앙) 정렬, align=absmiddle 대응 > 기술자료

• 목록

이미지를 중앙정렬 하기 위해서 middle 을 사용하기 위함이다.
<img src="이미지주소" border="0" align="absmiddle"> 을 자주사용하게된다.
하지만 이것은 비표준 태그라는 문제가 있다.

1. vertical-align에 middle을 주는것!
<img src="이미지" style="vertical-align:middle;">


2. li dd dt dt로 감싸 마진 패딩등으로 조정
<style>
.wrapper {
    text-align: center;
}
.wrapper ul {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style:none;
    /* For IE, the outcast */
    zoom:1;
    *display: inline;
}
.wrapper li {
    float: left;
    padding: 2px 5px;
    border: 0px solid black;
}
</style>
<div class="wrapper">
    <ul>
        <li>메뉴1</li>
        <li>메뉴2</li>
    </ul>
</div>


3. form 으로 둘러싸여있을때에 폼전체에 버티컬 얼라인을 중앙으로 잡는방법
<style>
img { vertical-align:middle; }
select {vertical-align:middle;}
input {vertical-align:middle;}
</style>

<form>
이름 : <img src="이미지" alt="이미지설명"><imput type="text">
</form>


4-1. 내용 가로 정렬
내용을 <p> 같은 종결 블록 요소의 왼쪽, 중앙, 오른쪽, 양쪽에 정렬한다.

<style>
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-justify { text-align: justify; }
</style>

내용이 든 종결 블록 요소에만 적용된다.
인라인 요소에 적용되지 않으며, 구조 블록 요소에는 제대로 적용되지 않는다.
구조 블록 요소에 text-align 속성을 지정하면 그 속성값은 자식 요소로 상속된다.


4-2. 내용 세로 정렬
인라인 요소를 부모 요소의 네 폰트라인 중 하나에 맞추려면 vertical-align 속성을 이용한다.
폰트라인은 인라인 내용을 맞출 수 있는 기준 위치 네 군데를 뜻한다. 이 기준 위치에 따라 정렬 콘텍스트라는 것이 형성된다.
text-top , middle , baseline , text-bottom


4-3. 고정폭의 블럭 요소 중앙 정렬
auto값은 요소 안의 마진 여백이 왼쪽 마진과 오른쪽 마진 사이에서 대등하게 나눠짐을 의미한다.

<style>
p {
  width: 100px; /* 정렬하려는 요소의 넓이를 반드시 지정 */
  margin: 0 auto;
}
</style>


4-4. 가변폭의 컨테츠를 중앙 정렬
너비가 고정되어 있지 않는 콘텐츠를 가운데 정렬하는 방법
가운데 정렬이 되는 것은 item 클래스의 요소이다. 인라인 요소도 가능

<style>
  .centered { display: table; margin-left: auto; margin-right: auto; }
</style>

<div class="centered">
  block item
</div>


4-5. 포지션이 absolute일때 중앙 정렬
left의 값을 50% 으로 잡기
margin-left의 값을 정렬하려는 div등의 넓이값/2 나누고 음수(-)값을 입력
ex. div width:400px면 400/2 = 200을 마진값으로 설정 margin-left:-200px

<style>
  .centered { width: 400px; position: absolute; left: 50%; margin-left: -200px; }
</style>
<div class="centered">absolute 가운데 정렬</div>


4-6. 포지션이 absolute일때 너비가 고정되지 않은 경우
transform 속성을 활용하여 요소의 너비의 절반만큼을 이동시킬 수 있다.

<style>
  .centered { position: absolute; left: 50%; transform: translateX(-50%); }
</style>

<div class="centered">transform 가운데 정렬</div>


4-7. div 영역안에 텍스트 세로 중앙 정렬
<div style="height:40px; display:table;display:table-cell; vertical-align:middle;">가운데 정렬</div>
height 값을 기준해서 그것의 중앙에 정렬 됩니다.


5-1. 테이블안의 요소 정렬
<style>
table { vertical-align: middle; }
</style>


5-2. div태그의 display속성을 table로 설정
테이블처럼 만들어서 테이블의 vertical-align 속성을 사용할 수 있도록 <div>를 몇개 셋팅한다. 이렇게 함으로써 div 태그에 table 속성에 있는 vertical-align 속성을 설정할 수 있다.

<style>
  #wrapper { display: table; }
  #cell { display: table-cell; vertical-align: middle; }
</style>

<div id="wrapper">
  <div id="cell">
    <div class="content">Content goes here</div>
  </div>
</div>

  . 높이가 변해도 상관없다(CSS에 높이를 지정하지 않아도 된다).
  . wrapper에 공간이 없어도 내용이 잘리지 않는다.
  . IE7 이하에서 작동하지 않는다.
  . 태그 단계가 깊어진다

한 줄에 여러 요소를 넣어야 할 때는 display: table 대신 display: inline-table을 사용할 수도 있다.


5-3. absolute 속성을 이용
absolute 속성을 이용하여 top 속성에 50%를 주어 콘텐츠를 내리고 margin을 이용하여 콘텐츠 높이의 절반을 margin-top:-120px;이와같이 음수값을 이용한다. 그럼으로써 높이를 고정시킬 수 있다. 이것은 요소의 높이를 CSS에서 지정해야 한다는 걸 의미한다.

<style>
  #content { position: absolute; top: 50%; height: 240px; margin-top: -120px; }
</style>

<div id="content">Content Here</div>

높이를 지정해 두기 때문에, 내용이 넘치면 div 밖으로 튀어나간다. 대신에 스크롤바가 생기도록 콘텐츠 div에 overflow: auto를 주고 싶을 것이다.
  . 모든 브라우저에서 작동한다.
  . 태그가 깊이 들어가지 않는다.
  . 충분한 공간이 없으면 내용이 잘린다(div가 body 밑에 있고, 사용자가 브라우저 창을 줄이면, 스크롤바가 나타나지 않는다).


5-4. 포지션이 absolute일때 높이가 고정되지 않은 경우
transform 속성을 활용하여 요소의 높이의 절반만큼을 이동시킬 수 있다.

<style>
  .centered { position: absolute; top: 50%; transform: translateY(-50%); width:100%;} }
</style>

<div class="centered">transform 세로 가운데 정렬</div>


5-5. float 속성을 이용
margin:0 auto; width:임의값px 을 넣어주면 float 의 영향에서 벗어날 수 있습니다.

<div style="margin:0 auto; width:310px;">
    <div style="float:left;">제품검색</div>
    <div style="float:left;">본문</div>
    <div style="clear:both;"></div>
</div>


5-6. ul li float="left" 속성을 이용
<style>
#div_center {
    float: right;
    position: relative;
    left: -50%;
}
#div_center li {
    float: left;
    position: relative;
    left: 50%;
    border: 0px solid red;
}
</style>
<ul id="div_center">
    <li>내용1</li>
    <li >내용2</li>
    <li>내용3</li>
</ul>


5-7. line-height 속성을 이용
이 방법은 박스 안의 텍스트가 한 줄일 경우에만 유효하다. 박스의 높이값과 line-height를 동일하게 부여한다.

<style>
  #content { height: 100px; line-height: 100px; }
</style>

<div id="content">Content Here</div>

  . 모든 브라우저에서 작동한다.
  . 공간이 없어도 잘리지 않는다.
  . 오직 텍스트에서만 작동한다(블럭 요소에선 작동하지 않는다).
  . 한 줄 이상이 되면 (즉, 두 줄이 되면), 보기 싫게 깨진다.


6. 가로 중앙 정렬 + 세로중앙 정렬

6-1. 포지션이 absolute일때 중앙 정렬(가로 중앙 정렬 + 세로중앙 정렬)
<style>
  div { position:relative; }
  #cm { position:absolute; }
  .hc { width:200px; left:0; right:0; margin-left:auto; margin-right:auto; } /* 가로 중앙 정렬 */
  .vc { height:40px; top: 0; bottom:0; margin-top:auto; margin-bottom:auto; } /* 세로 중앙 정렬 */
</style>

<div>
  <p id="cm" class="hc vc">가로 중앙 정렬 + 세로 중앙 정렬</p>
</div>


6-2. 포지션이 absolute일때 중앙 정렬(가로 중앙 정렬 + 세로중앙 정렬)
<style>
    #centered { position:absolute; top:50%; height:500px; margin-top:-250px; }
    .centeredV { position: absolute; left: 50%; transform: translateX(-50%); }
    .centeredH { display: table; margin-left: auto; margin-right: auto; }
</style>

<div id="centered" class="centeredV">
    <div style="text-align:center; padding:40px 0 0 0;">내용</div>
    <div style="margin-top:40px;" class="centeredH">
        <div style="float:left;"><a href="#"><img src="img1.png"></a></div>
        <div style="float:left;"><a href="#"><img src="img2.png"></a></div>
        <div style="clear:both;"></div>
    </div>
</div>


6-3. 가로 중앙정렬 + 세로중앙 정렬
<style>
    #centered { position:absolute; top:50%; height:100%;  }
    .centeredV { position: absolute; left: 50%; transform: translateX(-50%); text-align:center }
</style>
</head>

<body>
<div id="centered" class="centeredV">
    중앙정렬
</div>


7. Flexbox 활용하기
<style>
.centeredV {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
</style>

<div class="centeredV">
  중앙정렬
</div>


참고자료
http://blog.naver.com/hohoya33/90113849312
http://webdir.tistory.com/31#recentTrackback 
http://action713.tistory.com/entry/floatleft-가운데-정렬  
http://belhyun.blogspot.com/2013/12/css-ul-in-div-centering.html
http://blog.freezner.com/archives/604
http://rootbox.co.kr/p/268
https://www.daleseo.com/css-centering/