CODEWITHSUNDEEP
htmlcssflexbox
WordCent
WordCent

Reputation: 727

Vertically align <h2> when rotated 90 degree

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

I want that arrangement to look somewhat like this this

Please help me to that in such a way that when there is no "Video" text or h2 the image takes the whole width.

Code Pen Link

Upvotes: 1

Views: 256

Answers (4)

Asons
Asons

Reputation: 87191

Assuming you will use 2 different classes whether it is an image or a video, here is how you can make that work, so the image will take full width when there is no "video"

What I simply did were to put the h1 last in the row, and by doing so, I can target it using the sibling selector + and either show or hide it based on which class the previous sibling has.

With a video (simulated with a video class)

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

With an image (lacking the video class)

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

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115045

Use writing-mode..

Writing Mode @ MDN

The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

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>

Upvotes: 2

Gerard
Gerard

Reputation: 15786

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

Upvotes: 0

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

make h1 position:absolute and make it left aligned.give the row some padding on left.

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

hope this helps..

Upvotes: 1

Related Questions