CODEWITHSUNDEEP
htmlcss
Karabah
Karabah

Reputation: 249

How to place block in vertical center in div?

I have a HTML structure and this is based on Bootstrap template:

<div class="row">
    <div class="col-md-1"><span>Text</span></div>
    <div class="col-md-11"></div>
</div>

I rotated text to 90 degree:

transform: rotate(90deg);

How to place this block <span>Text</span> by vertical center independent of parent block height?

Schema is:

enter image description here

Upvotes: 1

Views: 61

Answers (2)

OPTIMUS PRIME
OPTIMUS PRIME

Reputation: 1325

You must do everything with div's ? I would suggest table...

If you looking for something like this -- http://jsfiddle.net/XrWzq/843/

(remove borders, and that's just what you want)

Upvotes: 0

Laura
Laura

Reputation: 8630

Based on the drawing you have done and using Bootstrap, you could to use flex properties like the following example :

span {
  display: inline-block;
  transform: rotate(90deg);
}

.d-flex {
  min-height: 100vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-row align-items-center">
    <div class="col-md-1"><span>Text</span></div>
    <div class="col-md-11">Moew....</div>
</div>

Upvotes: 2

Related Questions