我试图垂直对齐旋转了 -90 度的文本,但运气不佳。代码如下
HTML:
<section class="page_block" style="background: <?php echo $background; ?>;">
<div class="row">
<div class="col-md-1">
<div id="header">
<h1 class="verticaltext">
<?php echo $page->post_title; ?>
</h1>
</div>
</div>
<div class="col-md-11">
<p><?php echo $page->post_content; ?></p>
</div>
</div>
</section>
CSS:
.page_block {
margin:0px;
padding:10px;
}
#header {
position: relative;
}
.verticaltext {
transform: rotate(-90deg);
transform-origin: right, top;
-ms-transform: rotate(-90deg);
-ms-transform-origin:right, top;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:right, top;
position: absolute; bottom: 0%; left: 0%;
color: #ed217c;
}
结果是like . 这是一个 Wordpress 主题,实现了 Twitter Bootstrap 以及一个全宽 slider 。我已确认 Bootstrap 和 Slider 不包含冲突的 CSS。
最佳答案
不确定为什么你有 bottom: 0%; left: 0%;
首先,但删除它们会导致我相信你想要的目标。
Here's an example.
CSS:
.page_block {
margin:0px;
padding:10px;
}
#header {
position: relative;
}
.verticaltext {
transform: rotate(-90deg);
transform-origin: right, top;
-ms-transform: rotate(-90deg);
-ms-transform-origin:right, top;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:right, top;
position: absolute;
color: #ed217c;
}
关于html - 旋转文本 -90 度并与 div 垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20880244/