다음 문서에서는 내부 div를 가로로 가운데로 맞출 수 있습니까? 아니면 다른 방법으로 텍스트를 V와 H 둘 다 가운데에 outer div가되도록 만들 수 있습니까?텍스트를 세로 및 가로로 가운데에 맞 춥니 다

몇 가지 제한 사항 (시작시 지정하지 않으려면 죄송합니다) : 1. 해결책은 간단하지 않으므로 고정 폭을 지정해서는 안됩니다. 2. JavaScript가 없으며 순수한 CSS와 HTML 만 있습니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>the title</title> 
    <style> 

     div.outer { 
      /* ? */ 
     } 

     div.inner { 
      display: table-cell; 
      min-height: 100px; 
      vertical-align: middle; 
     } 

    </style> 
    </head> 
    <body> 
    <div class="outer"> 
     <div class="inner"> 
      <p>Vertically centered text. How to center it horizontally?</p> 
     </div> 
    <div> 
    </body> 
</html>

2012-09-29 Petr Abdulin

이 시도 :

.outer { 
    display: table; 
    width: 100%; 
} 
.inner { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
}

demo

그것은 더 자바 스크립트를 사용하지 않습니다 그리고 당신은 width/height/line-height를 해결할 필요가 없습니다.

출처

2012-09-29 09:55:20 Ana

완벽하게 작동하는 것처럼 보입니다. 정말 고맙습니다! –

this 자습서를 살펴보십시오. 작동 시키려면 line-height과 width 을 CSS에 추가해야합니다. 이 한 줄의 텍스트 인 경우

출처

2012-09-29 09:43:04

, 당신은 사용할 수 있습니다 : 브라우저 지원이 놀이에 온다

div.inner { 
    line-height: 100px; 
}

여러 줄이 까다 있습니다. jQuery를 사용하여 div.outer 크기를 확인한 후 & 패드를 생성하는 것이 가장 신뢰할 수있는 방법이지만 CSS에서 백분율로 패딩을 수행 할 수 있습니다.

$(document).ready(function() { 
    var whitespace = $("div.outer").innerHeight() - $("div.inner").innerHeight(); 
    var padding = Math.round(whitespace/2); 
    $("div.inner").css({ 
    "padding-top": padding + "px"; 
    }); 
});

출처

2012-09-29 09:51:25 Atari

줄 높이 옵션을 사용해 주셔서 감사합니다. 이것은 한 줄의 텍스트 상황에서 유용합니다. –

Google 검색을 몇 시간 동안 수행 한 후 마침내 다른 div의 div를 수평 및 수직으로 센터링하는 솔루션을 얻었습니다. 당신이 아이의 너비/높이를 고정 할 필요가 없습니다

 div.parent { 
      display: block; 
      text-align: center; 
      line-height: 300px; /* the height of parent div */ 
     } 
     div.child { 
      display: inline-block; 
      vertical-align: middle; 
     }

그것은 절대 위치를 사용하지 않습니다.
일부 Internet Explorer 버전에서는 지원되지 않는 display : table/tablecell을 사용하지 않습니다.
순수한 CSS 솔루션이므로 자식 div가 동적으로로드 되더라도 자바 스크립트를 작성할 필요가 없습니다.

희망이 있으시면 도움이 될 것입니다.

출처

2013-07-16 14:09:21 NeoWang

텍스트를 세로 및 가로로 가운데에 맞 춥니 다

답변

demo

관련 문제