logo标签列表

将文本逆时针旋转90度并与div垂直对齐

htmlcsswordpresstwitter-bootstrap
7

我正在尝试垂直对齐被旋转-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;
}

结果是喜欢。 这是一个Wordpress主题，同时实现了Twitter Bootstrap和全宽度滑块。我已确认Bootstrap和Slider都不包含冲突的CSS。
你想让文本如何对齐？居中吗？ - matewka
是的，请翻译，谢谢。 - terrorfall
5个回答
12

我不确定你一开始为什么要使用bottom: 0%; left: 0%;，但是如果去掉它们，我相信可以实现你想要的效果。

这里有一个例子。

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;
}
很抱歉，文本没有居中显示在div中。请查看此处的截图：http://i.imgur.com/ufHBsIw.jpg - terrorfall
我在那个里面不得不稍微/显著地更改了你的HTML和CSS，所以请仔细注意。 - Deryck
并没有帮助，因为您正在更改整个布局，标题位于左侧的1列中，而内容占据了另外的11列。您的解决方案破坏了通过Bootstrap实现的任何响应性。 - terrorfall
请问您能否详细解释一下问题出在哪里？我并不确定，只是通过试错找到了解决方法，所以希望能够得到解释。 - Edward G-Jones
11

enter image description here

HTML

<div class="container">
    <div class="vertical">Vertical Text Here</div>
    <div>
        <div>Horizontal Text Here</div>
        ...
        <div>Horizontal Text Here</div>
    </div>
</div>

CSS

.container{
     display: grid;
     grid-auto-rows: minmax(min-content, max-content);
     grid-template-columns: auto 1fr;
}

.vertical{
     transform: rotate(180deg);
     writing-mode: vertical-lr;
     text-align: center;
}

解释

实现-90度文本

writing-mode: vertical-lr可以使文字垂直书写，但其本质上等同于将文字旋转90度。通过使用transform: rotate(180deg)，我们可以得到所需的-90度效果。

垂直对齐旋转的文本

使用grid和grid-template-columns将旋转的文本放置在div旁边。这样，该div可以容纳多行文本或其他内容。使用text-align以任何你想要的方式来对齐旋转的文本。在这种情况下，是选择了center。

注意: 你可能不需要使用grid-auto-rows: minmax(min-content, max-content)。如果旋转文本的高度出现奇怪的问题，可以使用此选项强制换行，以适应其内容。

3
2
我已经成功实现了与Deruck相同的效果，但是没有改变html的结构。 JSFiddle 
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;
}
0
最终，我不得不放弃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");

这是基于Jason Lau的优秀脚本进行修改而来，原始脚本可以在这里找到。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接