Html 将文本旋转 -90 度并与 div 垂直对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20880244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotate text -90deg and vertically align with div
提问by terrorfall
I'm attempting to vertically align text that has been rotated by -90deg and not having much luck. Code below
我正在尝试垂直对齐已旋转 -90 度且运气不佳的文本。下面的代码
HTML:
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:
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;
}
The result is like. This is a Wordpress theme, with Twitter Bootstrap implemented as well as a full width slider. I have confirmed that both Bootstrap and the Slider do not contain conflicting CSS.
结果就像。这是一个 Wordpress 主题，实现了 Twitter Bootstrap 以及全宽滑块。我已经确认 Bootstrap 和 Slider 都不包含冲突的 CSS。
采纳答案by terrorfall
In the end, I've had to give up on the CSS front and generate the titles as transparent PNGs using GD. Not ideal, but gives me a lot more flexibility in terms of positioning. If anyone is interested in the rotation script I'm using, it's below
最后，我不得不放弃 CSS 前端并使用 GD 将标题生成为透明的 PNG。不理想，但在定位方面给了我更多的灵活性。如果有人对我正在使用的旋转脚本感兴趣，它在下面
define("DEFAULT_FONT", "fonts/BebasNeue-webfont.ttf");
define("DEFAULT_COLOR", "ed217c");
define("DEFAULT_SIZE", 24);
define("DEFAULT_ANGLE", 0);
define("DEFAULT_PADDING", 10);
define("DEFAULT_SPACING", 0);
$text = $_GET['text'];
if(isset($_GET['transform'])):
switch ($_GET['transform']){
case 'uc':
$text = strtoupper($_GET['text']);
break;
case 'lc':
$text = strtolower($_GET['text']);
break;
case 'ucf':
$text = ucfirst($_GET['text']);
break;
case 'ucw':
$text = ucwords($_GET['text']);
break;
}
endif;
$font = $_GET['font'] ? $_GET['font'] : DEFAULT_FONT;
$color = (strlen($_GET['color']) == 6 && ctype_alnum($_GET['color'])) ? "0x" . $_GET['color'] : "0x" . DEFAULT_COLOR;
$size = (is_numeric($_GET['size'])) ? $_GET['size'] : DEFAULT_SIZE;
$angle = (is_numeric($_GET['angle'])) ? $_GET['angle'] : DEFAULT_ANGLE;
$padding = (is_numeric($_GET['padding'])) ? $_GET['padding']*4 : DEFAULT_PADDING*4;
$spacing = (is_numeric($_GET['spacing'])) ? $_GET['spacing'] : DEFAULT_SPACING;
$text_dimensions = calculateTextDimensions($text, $font, $size, $angle, $spacing);
$image_width = $text_dimensions["width"] + $padding;
$image_height = $text_dimensions["height"] + $padding;
$new_image = imagecreatetruecolor($image_width, $image_height);
ImageFill($new_image, 0, 0, IMG_COLOR_TRANSPARENT);
imagesavealpha($new_image, true);
imagealphablending($new_image, false);
imagettftextSp($new_image, $size, $angle, $text_dimensions["left"] + ($image_width / 2) - ($text_dimensions["width"] / 2), $text_dimensions["top"] + ($image_height / 2) - ($text_dimensions["height"] / 2), $color, $font, $text, $spacing);
imagepng($new_image);
imagerotate($new_image, 90, 0);
imagedestroy($new_image);
function imagettftextSp($image, $size, $angle, $x, $y, $color, $font, $text, $spacing = 0)
{
if ($spacing == 0)
{
imagettftext($image, $size, $angle, $x, $y, $color, $font, $text);
}
else
{
$temp_x = $x;
for ($i = 0; $i < strlen($text); $i++)
{
$bbox = imagettftext($image, $size, $angle, $temp_x, $y, $color, $font, $text[$i]);
$temp_x += $spacing + ($bbox[2] - $bbox[0]);
}
}
}
function calculateTextDimensions($text, $font, $size, $angle, $spacing) {
$rect = imagettfbbox($size, $angle, $font, $text);
$minX = min(array($rect[0],$rect[2],$rect[4],$rect[6]));
$maxX = max(array($rect[0],$rect[2],$rect[4],$rect[6]));
$minY = min(array($rect[1],$rect[3],$rect[5],$rect[7]));
$maxY = max(array($rect[1],$rect[3],$rect[5],$rect[7]));
$spacing = ($spacing*(strlen($text)+2));
return array(
"left" => abs($minX) - 1,
"top" => abs($minY) - 1,
"width" => ($maxX - $minX)+$spacing,
"height" => $maxY - $minY,
"box" => $rect
);
}
header("content-type: image/png");
Modified from Jason Lau's awesome script, which can be found here.
修改自 Jason Lau 的很棒的脚本，可以在这里找到。
回答by Deryck
Not sure why you had bottom: 0%; left: 0%;in the first place, but removing them results in your desired goal I believe.
不知道为什么你bottom: 0%; left: 0%;首先有，但我相信删除它们会导致你想要的目标。
Here's an example.
这是一个例子。
CSS:
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;
}
回答by Edward G-Jones
I've managed to achieve the same effect as Deruck but without changing the structure of the html.
我设法达到了与 Deruck 相同的效果，但没有改变 html 的结构。
body{
margin:0;
}
p{
margin: 0;
}
.page_block {
margin:0px;
}
.row{
position: relative;
}
.col-md-11{
margin-left:50px;
}
.verticaltext {
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
bottom: 45%;
position: absolute;
color: #ed217c;
}
回答by jgrumps
There is a CSS property that rotates text and orients the containing blocks: writing-mode
有一个 CSS 属性可以旋转文本并定位包含块的方向： writing-mode
Here is a JS Fiddle example.
这是一个JS Fiddle 示例。
