CODEWITHSUNDEEP
csscentering
MarcS
MarcS

Reputation: 470

Centering vertical text in a div

I have a two column layout with two columns of equal height. I made them the same height using flexbox.

The left column is supposed to contain vertical text which should then be centered along the full height of the column

The HTML looks like this

<div class="month">
  <div class="name"><div>Jan</div></div>
    <div class="days">
       <div class="day">123</div>
       <div class="day">123</div>
       <div class="day">123</div>
       <div class="day">123</div>      
     </div>
  </div>

And this is the CSS

div.month {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
div.name {
  border: 1px solid red;
  width: 20px;
  position: relative;
}
div.name  div {
  transform: rotate(90deg);
  transform-origin: left top 0;
  margin-left: 20px;
  width: 100%;
  text-align: center;
}

div.days {
  width: 100%;
  margin-left: 20px;

div.day {
  border: 1px solid black;
}

Here is an example http://jsfiddle.net/o6xv824u/

I can't figure out how to center the text in div.month

any ideas?

Upvotes: 1

Views: 64

Answers (2)

Prateek
Prateek

Reputation: 4490

If you want to align it vertically center, you can make use of position absolute, "margin-top" and "top" css properties.

I have made some changes in your css code as well. Have a look at working fiddle.

CSS : 

div.name  div {
      transform: rotate(90deg);
      transform-origin: center center;   // rotate the text from center origin  
      width: 100%;
      position: absolute;
      top: 50%;
      margin-top: -50%; // to make it align vertically center
}

Upvotes: 3

Muhammad Umer
Muhammad Umer

Reputation: 18097

You could use absolute position then translate.

http://jsfiddle.net/o6xv824u/1/

position:absolute; top:50%; left:50%;

transform: translate (-50%,-50%);

Upvotes: 0

Related Questions