旋转文本-90deg并垂直对齐div

时间：2014-01-02 09:53:35

标签： html css wordpress twitter-bootstrap

我正在尝试垂直对齐已经旋转了-90deg并且没有太多运气的文本。代码

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以及全宽滑块。我已经确认Bootstrap和Slider都不包含冲突的CSS。

5 个答案:

答案 0 :(得分：9)

不确定为什么你首先拥有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;
}

答案 1 :(得分：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;
}

答案 2 :(得分：2)

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 :(得分：1)

有一个CSS属性，它可以旋转文本并确定包含块的方向：writing-mode

这里是JS Fiddle example.

答案 4 :(得分：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的精彩剧本，可以找到here。

相关问题
最新问题