하는 방법으로 수직 중심 콘텐츠를 가진 변수를 높이에 div?

StackOverflow https://stackoverflow.com/questions/59309

  •  09-06-2019
  •  | 
  •  

문제

가장 좋은 방법은 무엇을 수직 중심의 콘텐츠 div 높이의 콘텐츠는 변수입니다.에 특정한 경우,높이의 컨테이너 div 고정되지만,그것은 좋은 것이 있다면 솔루션을 작동 하는 경우에는 컨테이너에는 변수를 높이뿐만 아니라.또한,나를 사랑하는 것이 솔루션과 함께 없는,또는 아주 작은 사용 CSS 해킹 및/또는 non-semantic markup.

alt text

도움이 되었습니까?

해결책

단가

position: relative;
top: 50%;
transform: translateY(-50%);

안 div.

그것이 무엇을 이동하는 안 div 최고의 테두리를 절반의 높이는 외부 div(top: 50%; 다)및 그런 다음 안 div 에 의해 그것의 절반 높이(transform: translateY(-50%)).이와 함께 작동 position: absolute 나 relative.

유지 하는 마음에 transform 고 translate 공급업체가 접두사는 포함되지 않습니다.

Codepen: http://codepen.io/anon/pen/ZYprdb

다른 팁

이것이 최고의 솔루션을 발견했을 이 문제는 한,당신의 브라우저 지원 ::before 의사소: CSS 트:중심에서 알 수 없음.

그것은 필요하지 않 추가 태그 및 작동하는 것 같습니다.나를 사용할 수 없 display: table 방법문 table 요소를 준수하지 않은 max-height 을 제공합니다.

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}
<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

이것은 무언가를 할 필요가 많은 시간과 일관된 솔루션을 필요가 없음을 의미하지 않는 당신을 조금 추가 비-의미 태그와 일부 브라우저의 특정 해킹.우리가 지원하는 브라우저 css3 은 당신이 얻을 수직 중심으로 죄없이.

에 대해 더 잘 설명할 수 있는 기술보 문서 내에서 적응, 지만,기본적으로 포함한 추가 요소를 적용하는 다양한 스타일에서 즉 및을 지원하는 브라우저 position:table\table-cell 에 non-테이블 요소입니다.

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

많은 방법(해킹)을 적용하는 스타일에 특정 브라우저입니다.내가 사용되는 조건부 의견을 보고 하지만 문서를 연결하는 두 개의 다른 기술입니다.

참고:간단한 방법이 있을 얻을 수직 중심으로 알고 있는 경우에는 일부 높이는 경우,사전에 당신은 당신을 중심으로 노력하는 한 줄의 텍스트,또는 여러 가지 다른 경우에는 적합하지 않습니다.만약 당신이 더 많은 정보를 가지고 다음에 던져 있기 때문에할 수 있는 방법을 필요로하지 않는 브라우저 해킹이나 비 semantic markup.

업데이트: 우리는 시작을 더 얻을 지원하는 브라우저 CSS3,데리고 모두 코드 상자와 변환로 대체 방법을 얻기 위해 수직 중심으로(다른 효과).보 이 다른 질문 에 대한 자세한 내용은 현대적 방법,그러나 유지 하는 마음에서 지원하는 브라우저입니다 여전히 스케치에 대한 CSS3.

를 사용하여 아이를 선택,가 Fadi 의 놀라운 답변 위고 삶은 하나만으로 CSS 는 규칙이 내가 적용할 수 있습니다.지금 내가 할 일은 추가 contentCentered 클래스 이름을 요하고 싶어 센터

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}
<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

갈래 CodePen: http://codepen.io/dougli/pen/Eeysg

최고의 결과를 위해 내게 지금까지:

div 을 중심으로:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

당신은 여백을 사용할 수 있습니다.플렉스,div 될 것으로 보인 중심의 수직으로 너무입니다.

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

이 멋진 솔루션 div 동적(percentaged)높이입니다.

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

.inner_placer{  
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>

이 시도합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top