여백 또는 패딩을 부모 컨테이너 높이의 백분율로 설정하는 방법은 무엇입니까?

여백 또는 패딩을 부모 컨테이너 높이의 백분율로 설정하는 방법은 무엇입니까?

나는 다음을 사용하여 CSS에서 수직 정렬을 만드는 것에 대해 머리를 짜내고 있었습니다.

.base{
        background-color:green;
	    width:200px;
	    height:200px;
	    overflow:auto;
	    position:relative;
	}

    .vert-align{
		padding-top:50%;
		height:50%;
	}

<!-- and used the following div structure. -->

    <div class="base">
       <div class="vert-align">
    	   Content Here
       </div>
    </div>

이 경우에는 효과가 있는 것처럼 보였지만, 베이스 디브의 폭을 늘리거나 줄이면 수직 정렬이 끊어지는 것에 놀랐습니다.padding-top 속성을 설정할 때 padding을 우리의 경우 기본인 parent container 높이의 백분율로 할 것으로 예상했는데 위의 값 50%는 너비의 백분율로 계산됩니다. :(

자바스크립트를 사용하지 않고 패딩 및/또는 마진을 높이의 백분율로 설정할 수 있는 방법이 있습니까?

해결책은 예, 수직 패딩 및 마진이 폭에 상대적이라는 것입니다.top그리고.bottom 그렇지 않습니다.

그러니까 디브를 다른 내부에 배치하고, 내부 디브에는 이런 것을 사용합니다.top:50%()position여전히 작동하지 않는 경우)

약간 다른 질문에 대한 답변:사용가능vh뷰포트 중앙에 요소를 패드할 단위:

.centerme {
    margin-top: 50vh;
    background: red;
}

<div class="centerme">middle</div>

다음은 필요한 동작을 에뮬레이트하는 두 가지 옵션입니다.일반적인 해결책은 아니지만 경우에 따라서는 도움이 될 수도 있습니다.여기서 수직 간격은 부모가 아닌 외부 요소의 크기를 기준으로 계산되지만, 이 크기 자체는 부모와 상대적일 수 있으며 이렇게 하면 간격도 상대적일 수 있습니다.

<div id="outer">
    <div id="inner">
        content
    </div>
</div>

첫 번째 옵션: 의사 요소를 사용합니다. 여기서 수직 및 수평 간격은 바깥쪽에 상대적입니다. 데모

#outer::before, #outer::after {
    display: block;
    content: "";
    height: 10%;
}
#inner {
    height: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

수평 간격을 바깥쪽 요소로 이동시키면 바깥쪽의 부모와 상대적인 관계가 됩니다.

#outer {
    padding-left: 10%;
    padding-right: 10%;
}

두 번째 옵션: 절대 위치 지정을 사용합니다. 데모

#outer {
    position: relative;
}
#inner {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
}

자식 요소를 부모 요소에서 절대적으로 위치시키려면 부모 요소에서 상대적 위치를 설정하고 자식 요소에서 절대적 위치를 설정해야 합니다.

그러면 자식 요소 '위'는 부모의 키에 상대적입니다.그래서 당신은 또한 아이를 자신의 키의 50% 위로 '번역'할 필요가 있습니다.

.base{
    background-color: green;
    width: 200px;
    height: 200px;
    overflow: auto;
    position: relative;
}
    
.vert-align {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

    <div class="base">
        <div class="vert-align">
            Content Here
        </div>
    </div>

플렉스 박스를 이용한 솔루션도 있습니다.

.base{
    background-color:green;
    width: 200px;
    height: 200px;
    overflow: auto;
    display: flex;
    align-items: center;
}

<div class="base">
    <div class="vert-align">
        Content Here
    </div>
</div>

둘 다 장점/단점을 발견하게 될 것입니다.

이는 해당 속성을 통해 달성할 수 있습니다.요소를 설정하는 경우writing-mode다음과 같은 세로 쓰기 모드로 이동합니다.vertical-lr, 두 차원 모두에서 패딩과 마진에 대한 하위 요소의 백분율 값은 너비 대신 높이에 상대적이 됩니다.

사양에서:

. . CSS2.1의 포함 블록 폭에 대해 항상 계산되는 마진 및 패딩 특성에 대한 백분율은 CSS3의 포함 블록의 인라인 크기에 대해 계산됩니다.

인라인 크기의 정의:

인라인 차원의 측정: 가로 쓰기 모드에서 물리적 너비(수평 차원)를 나타내고, 세로 쓰기 모드에서 물리적 높이(수직 차원)를 나타냅니다.

예를 들어, 가로 여백은 너비에 상대적이고 세로 여백은 높이에 상대적인 크기의 요소를 사용합니다.

.resize {
  width: 400px;
  height: 200px;
  resize: both;
  overflow: hidden;
}

.outer {
  height: 100%;
  background-color: red;
}

.middle {
  writing-mode: vertical-lr;
  margin: 0 10%;
  width: 80%;
  height: 100%;
  background-color: yellow;
}

.inner {
  writing-mode: horizontal-tb;
  margin: 10% 0;
  width: 100%;
  height: 80%;
  background-color: blue;
}

<div class="resize">
  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>
</div>

세로 쓰기 모드를 사용하는 것은 요소의 가로 세로 비율을 일정하게 유지하고 너비 대신 높이에 따라 크기를 조정하려는 경우에 특히 유용할 수 있습니다.

한 줄 텍스트의 중심을 맞추는 다른 방법은 다음과 같습니다.

.parent{
  position: relative;
}

.child{
   position: absolute;
   top: 50%;
   line-height: 0;
}

아니면 그냥

.parent{
  overflow: hidden; /* if this ins't here the parent will adopt the 50% margin of the child */
}

.child{
   margin-top: 50%;
   line-height: 0;
}

이것은 매우 흥미로운 버그입니다. (어쨌든 버그라고 생각합니다.) 멋진 발견입니다!

설정 방법과 관련하여 카밀로 마틴의 답변을 추천합니다.하지만 이유에 관해서는, 여러분들이 괜찮다면 이것에 대해 조금 설명하고 싶습니다.

---

CSS 사양에서 찾은 항목:

'''
백분율: 포함하는 블록의 너비 참조

… 이상하긴 하지만 알겠어요

그래서 부모님과 함께width: 210px아이와padding-top: 50%, 계산된/계산된 값을 받습니다.padding-top: 96.5px– 기대했던 것이 아닌105px.

그 이유는 Windows(다른 OS에 대해서는 잘 모르기 때문입니다)에서는 일반 스크롤 바의 크기가 되기 때문입니다.17px × 100%(또는100% × 17px가로 막대의 경우).그것들의17px계산하기 전에 감산됩니다.50%,이런 이유로50% of 193px = 96.5px.

빈 행이 있는 CSS 그리드

이 접근 방식은 해당 컨테이너에 대해 css-grid를 이미 사용 중인 경우에만 의미가 있을 수 있지만, 사용 중인 경우 (행이기 때문에) 높이의 백분율이 되는 빈 행을 만들 수 있습니다.

.wrapper
{
  border: 2px solid red;
  width: 400px;
  height: 200px;
  
  display: grid;
  grid-template-rows: 10% 1fr;
}

.child
{
  background: orange;
  width: 50px;
  height: 50px;
  
  grid-area: 2/1;
}

<div class="wrapper">
  <div class="child">
  </div>
</div>

50% 패딩은 아이의 중심을 잡을 수 없고, 중심 아래에 위치할 것입니다.25%의 패딩을 정말 원하시는 것 같네요.콘텐츠가 길어지면서 공간이 부족해지는 것은 아닐까요?또한 패딩 탑 대신 마진 탑을 설정해보셨나요?

편집: 신경쓰지 마세요, w3 학교 사이트에 의하면

% 포함 요소의 너비에 대한 패딩(%)을 지정합니다.

그래서 항상 폭을 사용하는 것은 아닐까요?저는 전혀 눈치채지 못했습니다.

하지만 최소한 최신 브라우저의 경우에는 display:table을 사용하여 작업을 수행할 수 있습니다.여기서 기술을 설명합니다.

언급URL : https://stackoverflow.com/questions/4982480/how-to-set-the-margin-or-padding-as-percentage-of-height-of-parent-container