Làm cách nào để đặt lề hoặc phần đệm theo tỷ lệ phần trăm chiều cao của thùng chứa mẹ?

Tôi đã sử dụng bộ não của mình để tạo ra sự liên kết dọc trong css bằng cách sử dụng như sau

.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>

Mặc dù điều này dường như hoạt động trong trường hợp này, tôi đã ngạc nhiên rằng khi tôi tăng hoặc giảm chiều rộng của div cơ sở của mình, căn chỉnh dọc sẽ chụp. Tôi đã hy vọng rằng khi tôi đặt thuộc tính padding-top, nó sẽ lấy phần đệm là phần trăm chiều cao của container mẹ, là cơ sở trong trường hợp của chúng tôi, nhưng giá trị trên 50 phần trăm được tính bằng tỷ lệ phần trăm của chiều rộng. :

Có cách nào để đặt phần đệm và / hoặc lề theo tỷ lệ phần trăm của chiều cao mà không cần sử dụng JavaScript không?

Việc sửa chữa là có, đệm dọc và lợi nhuận có liên quan đến chiều rộng, nhưng topvà bottom không.

Vì vậy, chỉ cần đặt một div bên trong một div khác và trong div bên trong, sử dụng một cái gì đó như top:50%(nhớ positionvấn đề nếu nó vẫn không hoạt động)

Một câu trả lời cho một câu hỏi hơi khác: Bạn có thể sử dụng vhcác đơn vị để đệm các phần tử vào giữa khung nhìn :

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

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

Dưới đây là hai tùy chọn để mô phỏng hành vi cần thiết. Không phải là một giải pháp chung, nhưng có thể giúp đỡ trong một số trường hợp. Khoảng cách dọc ở đây được tính toán dựa trên kích thước của phần tử bên ngoài, không phải cha mẹ của nó, nhưng chính kích thước này có thể tương đối với cha mẹ và theo cách này, khoảng cách cũng sẽ tương đối.

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

Tùy chọn đầu tiên: sử dụng các phần tử giả, ở đây khoảng cách dọc và ngang có liên quan đến bên ngoài. Bản giới thiệu

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

Di chuyển khoảng cách ngang đến phần tử bên ngoài làm cho nó tương đối với cha mẹ của bên ngoài. Bản giới thiệu

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

Tùy chọn thứ hai: sử dụng định vị tuyệt đối. Bản giới thiệu

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

Để làm cho phần tử con được định vị tuyệt đối từ phần tử cha của nó, bạn cần đặt vị trí tương đối trên phần tử cha VÀ vị trí tuyệt đối trên phần tử con.

Sau đó, trên phần tử con 'trên cùng' có liên quan đến chiều cao của cha mẹ. Vì vậy, bạn cũng cần 'dịch' lên cho trẻ 50% chiều cao của chính nó.

.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>

Có một giải pháp khác sử dụng hộp flex.

.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>

Bạn sẽ tìm thấy lợi thế / giải tán cho cả hai.

Điều này có thể đạt được với writing-modetài sản. Nếu bạn đặt một phần tử writing-modethành chế độ viết dọc, chẳng hạn như vertical-lr, các giá trị phần trăm của hậu duệ của nó cho phần đệm và lề, ở cả hai chiều, sẽ trở nên tương đối so với chiều cao thay vì chiều rộng.

Từ thông số kỹ thuật :

. . . tỷ lệ phần trăm trên các thuộc tính lề và phần đệm, luôn được tính theo chiều rộng khối chứa trong CSS2.1, được tính theo kích thước nội tuyến của khối chứa trong CSS3.

Định nghĩa của kích thước nội tuyến :

Một phép đo trong kích thước nội tuyến: đề cập đến chiều rộng vật lý (chiều ngang) trong chế độ viết ngang và chiều cao vật lý (chiều dọc) trong chế độ viết dọc.

Ví dụ, với một phần tử có thể thay đổi kích thước, trong đó lề ngang có liên quan đến chiều rộng và lề dọc có liên quan đến chiều cao.

.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>

Sử dụng chế độ viết dọc có thể đặc biệt hữu ích trong trường hợp bạn muốn tỷ lệ khung hình của một phần tử không đổi, nhưng muốn kích thước của nó được chia tỷ lệ tương quan với chiều cao của nó thay vì chiều rộng.

Một cách khác để căn giữa một dòng văn bản là:

.parent{
  position: relative;
}

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

hoặc chỉ

.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;
}

Một miếng đệm 50% sẽ không tập trung vào con bạn, nó sẽ đặt nó bên dưới trung tâm. Tôi nghĩ rằng bạn thực sự muốn một phần đệm 25%. Có lẽ bạn đang hết dung lượng khi nội dung của bạn cao hơn? Ngoài ra, bạn đã thử thiết lập lề trên thay vì đệm trên?

EDIT: Nevermind, trang w3schools nói

% Chỉ định phần đệm theo phần trăm chiều rộng của phần tử chứa

Vì vậy, có thể nó luôn luôn sử dụng chiều rộng? Tôi chưa bao giờ để ý.

Những gì bạn đang làm có thể được đạt được bằng cách sử dụng display: bảng (ít nhất là đối với các trình duyệt hiện đại). Kỹ thuật được giải thích ở đây .

Đây là một lỗi rất thú vị. (Theo tôi, dù sao nó cũng là một lỗi) Nice find!

Về cách đặt nó, tôi muốn giới thiệu câu trả lời của Camilo Martin. Nhưng tại sao , tôi muốn giải thích điều này một chút nếu các bạn không phiền.

Trong thông số kỹ thuật CSS tôi tìm thấy:

Tỷ lệ phần trăm 'đệm' : tham khảo chiều rộng của khối chứa

Thật là kỳ lạ, nhưng không sao.

Vì vậy, với cha mẹ width: 210pxvà một đứa trẻ padding-top: 50%, tôi nhận được một giá trị được tính toán / tính toán padding-top: 96.5px- không như mong đợi 105px.

Đó là bởi vì trong Windows (tôi không chắc chắn về các HĐH khác), kích thước của các thanh cuộn thông thường là theo mặc định 17px × 100%(hoặc 100% × 17pxcho các thanh ngang). Những người 17pxđược trừ trước khi tính toán 50%, do đó 50% of 193px = 96.5px.