텍스트를 -90도 회전하고 div와 수직으로 정렬합니다.

텍스트를 -90도 회전하고 div와 수직으로 정렬합니다.

-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가 포함되어 있지 않음을 확인했습니다.

왜 그랬는지 모르겠어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;
}

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-columnsdiv 옆에 회전된 텍스트를 배치합니다.이렇게 하면 div는 여러 줄이나 다른 것들을 담을 수 있습니다.사용하다text-align원하는 대로 회전된 텍스트를 정렬할 수 있습니다.이 경우에는center.

주의: 다음 사항이 필요하지 않을 수 있습니다.grid-auto-rows: minmax(min-content, max-content)회전된 텍스트의 높이가 이상한 경우, 회전된 텍스트를 내용에 맞게 강제로 줄바꿈할 수 있습니다.

텍스트를 회전하고 포함된 블록을 오리엔테이션하는 CSS 속성이 있습니다.

다음은 JS Fidle의 예입니다.

나는 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;
}

결국 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의 멋진 대본에서 수정한 것입니다.여기서 확인하실 수 있습니다.

언급URL : https://stackoverflow.com/questions/20880244/rotate-text-90deg-and-vertically-align-with-div