How to place block in vertical center in div?

Question

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:

there is no rotation as the span is inline element .. so this code doesn't reproduce what you have a i guess. There i no more CSS ? — Temani Afif, Apr 17 '18 at 20:01
@Karabah If you want to rotate the `span` you will have to set its display to something other that the default of inline. See [updated fiddle](http://jsfiddle.net/XrWzq/829/) — zgood, Apr 17 '18 at 20:01
I dont understand why block are not inline it gives 12 grid points in sum — Karabah, Apr 17 '18 at 20:04
Whats the problem with that last fiddle? What is your desired end result? Also, what are you referring to when you use the word "block"? — zgood, Apr 17 '18 at 20:07
I feel like https://stackoverflow.com/questions/15138723/vertically-center-rotated-text-with-css may help with this. — StardustGogeta, Apr 17 '18 at 20:13

score 2 · Accepted Answer · answered Apr 17 '18 at 20:29

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>

OPTIMUS PRIME · Answer 2 · 2018-04-17T21:15:22.747

0

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)

edited Apr 17 '18 at 21:15

answered Apr 17 '18 at 20:13

OPTIMUS PRIME

1,297
9
20

How to place block in vertical center in div?

2 Answers2