旋转90度时垂直对齐<h2>

时间：2017-06-26 10:31:20

标签： html css css3 flexbox 

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

我希望这种安排看起来有点像this

请以这样的方式帮助我：当没有“视频”文本或h2时，图像占据整个宽度。

Code Pen Link

4 个答案:

答案 0 :(得分：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;
}

希望这会有所帮助..

答案 1 :(得分：1)

使用writing-mode ..

Writing Mode @ MDN

  

写入模式属性定义文本行是水平放置还是垂直放置以及块进展的方向。

＆＃13;
＆＃13; 
h1 {
  writing-mode: vertical-rl;
  float: left;
  margin: 0;
  font-size: 5em;
  transform: rotate(180deg);
}

img {
  height: 220px;
}

.row {
  margin: 1em;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

假设您将使用2个不同的类，无论是图像还是视频，以下是如何使其工作，因此图像将采用全宽度没有＆＃34;视频＆＃34;

我只是将h1放在最后一行，通过这样做，我可以使用兄弟选择器+来定位它，并根据哪个类显示或隐藏它以前的兄弟姐妹。

使用视频（使用video类进行模拟）

＆＃13;
＆＃13; 
.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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

带图像（缺少video类）

＆＃13;
＆＃13; 
.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);
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

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

.row img {
  width: 100%;
}

.row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题