div中間垂直對齊的垂直文本

Question

我有一個div，其中包含一些垂直方向的文本，如下所示。 我要實現的目標，下圖顯示：

Answer 1

我不確定您的html / css結構，也不知道您的代碼是什么樣，但這是我寫的一個示例。

 * { 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>