垂直對齊 <h2> 旋轉90度時

Question

<div class="row">
    <h1>Video</h1>
    <img src="http://i1.mirror.co.uk/incoming/article2784141.ece/ALTERNATES/s1200/Tom-Cruise-and-Cameron-Diaz.jpg" alt="">
</div>

CSS→

.row h1 {
    font-size: 12.9em;
    transform: rotate(-90.0deg);
}

我希望這種安排看起來有點像這樣

請幫助我這樣做，當沒有“視頻”文本或h2時，圖像占據整個寬度。

Code Pen Link

Answer 1

使h1位置：絕對並使其左對齊。將行放在左邊的一些填充處。

CSS

.row{
  position: relative;
  PADDING-LEFT:10em;
}

.row h1 {
    font-size: 12.9em;
    transform: rotate(-90.0deg);
  position: absolute;
  left:0;
  top:0;
  bottom:0;
  margin:auto;
}

希望這可以幫助..

Answer 2

使用writing-mode ..

寫作模式@MDN

書寫模式屬性定義文本行是水平放置還是垂直放置以及塊進展的方向。

 h1 { writing-mode: vertical-rl; float: left; margin: 0; font-size: 5em; transform: rotate(180deg); } img { height: 220px; } .row { margin: 1em; } 

 <div class="row"> <h1>Video</h1> <img src="http://i1.mirror.co.uk/incoming/article2784141.ece/ALTERNATES/s1200/Tom-Cruise-and-Cameron-Diaz.jpg" alt=""> </div> 

Answer 3

假設您將使用2個不同的類別，無論是圖像還是視頻 ，以下是如何使其工作，因此當沒有“視頻”時圖像將占據全寬

我簡單地做的是將h1放在最后一行，通過這樣做，我可以使用兄弟選擇器+來定位它，並根據前一個兄弟所具有的類來顯示或隱藏它。

使用視頻（使用video類模擬）

 .row { position: relative; } .row h1 { display: none; } .row .video, .row .image, .row img { width: 100%; } .row .video { padding-left: 8rem; /* match font size of h1 */ box-sizing: border-box; } .row .video + h1 { position: absolute; display: block; font-size: 8rem; left: 0; top: 0; margin: 0; transform-origin: top right; transform: translateX(-100%) rotate(-90deg); } 

 <div class="row"> <img class="video" src="http://i1.mirror.co.uk/incoming/article2784141.ece/ALTERNATES/s1200/Tom-Cruise-and-Cameron-Diaz.jpg" alt=""> <h1>Video</h1> </div> 

---

帶圖像（缺少video類）

 .row { position: relative; } .row h1 { display: none; } .row .video, .row .image, .row img { width: 100%; } .row .video { padding-left: 8rem; /* match font size of h1 */ box-sizing: border-box; } .row .video + h1 { position: absolute; display: block; font-size: 8rem; left: 0; top: 0; margin: 0; transform-origin: top right; transform: translateX(-100%) rotate(-90deg); } 

 <div class="row"> <img class="image" src="http://i1.mirror.co.uk/incoming/article2784141.ece/ALTERNATES/s1200/Tom-Cruise-and-Cameron-Diaz.jpg" alt=""> <h1>Video</h1> </div> 

Answer 4

 .row h1 { font-size: 12.9em; transform: rotate(-90.0deg); } .row img { width: 100%; } .row { display: flex; justify-content: flex-start; align-items: center; } 

 <div class="row"> <h1>Video</h1> <img src="http://i1.mirror.co.uk/incoming/article2784141.ece/ALTERNATES/s1200/Tom-Cruise-and-Cameron-Diaz.jpg" alt=""> </div>