Vertical text with vertical-align middle in a div

Question

I have a div which contains some text in vertical direction as below. What I want to achieve, the below picture shows:

Answer 1

I am not sure of your html/css structure, or what your code may look like, but here is an example I wrote up.

 * { box-sizing: border-box; /* Set the box sizing for easier margins/paddings. */ } html, body { margin: 0; /* Demo style. */ background: #95a5a6; /* Demo style. */ } .container { width: 50%; /* Demo style. */ margin: 50px auto; /* Demo style. */ background: white; /* Demo style. */ font-family: arial; /* Demo style. */ font-size: 16px; /* Demo style. */ } /* The parent of the rotated text. */ .box { position: relative; /* Relative for the absolute childs. */ background: #c0392b; /* Demo style. */ color: white; /* Demo style. */ padding: 10px; /* Demo style. */ height: 200px; /* Static height is required. */ } /* The rotated text */ .box span { width: 200px; /* Must be the same as the height of the .box div. */ -webkit-transform-origin: 90px 100px; /* These values will need to be changed depending on your width of this span, and height of it's parent. */ display: inline-block; /* Set the display of the span to be in the block flow. */ -webkit-transform: rotate(-90deg); /* Rotate the text span. */ background: #2980b9; /* Demo style. */ text-align: center; /* Center the text. */ padding: 10px; /* Demo style. */ float: left; /* Make the rotated text be on the left most part of the parent. */ } /* Other content that can be beside the rotated text */ .content { position: absolute; /* So the content is not affected by the rotated text. */ margin: 0 0 0 30px; /* Push the content from the left so it is not behind the rotated text. */ top: 0; /* Push the content to the top of the parent. */ padding: 0 10px; /* Demo style. */ } 

 <div class="container"> <div class="box"> <span>JS</span> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis culpa laborum suscipit, laudantium ut recusandae architecto modi natus incidunt, consequuntur ea quas quod nisi nobis possimus nostrum, porro neque saepe.</p> </div> </div> </div>