gpt4 book ai didi

html - div 中垂直居中的垂直文本

转载 作者:行者123 更新时间:2023-11-28 05:13:46 27 4
gpt4 key购买 nike

我有一个 div,其中包含一些垂直方向的文本,如下所示。我想要达到的效果,如下图所示:

enter image description here

最佳答案

我不确定你的 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>

关于html - div 中垂直居中的垂直文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39416776/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com