Faire pivoter le texte -90deg et alignez verticalement avec des div

Je suis d'essayer d'aligner verticalement le texte qui a été tourné par -90deg et de ne pas avoir beaucoup de chance. Le Code ci-dessous

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

Le résultat est comme.
C'est un thème WordPress, avec Twitter Bootstrap mis en œuvre ainsi qu'un curseur de largeur. J'ai confirmé que les deux Bootstrap et le Curseur ne contiennent pas de conflit de CSS.

Comment voulez-vous que le texte soit aligné? Centre?
Oui s'il vous plaît, ce serait génial

OriginalL'auteur terrorfall | 2014-01-02

9

Ne savez pas pourquoi vous avez eu bottom: 0%; left: 0%; en premier lieu, mais en enlevant les résultats dans votre but désiré, je crois.

Voici un exemple.

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;
}
```
Peur de ne pas, le texte ne s'est pas assis dans le centre de la div. Voir la capture d'écran ici i.imgur.com/ufHBsIw.jpg
Essayez ceci: jsfiddle.net/JwC52
J'ai dû légèrement/fortement modifier votre code HTML et CSS que l'on donc faites attention
N'aide pas que vous êtes à la modification de toute la mise en page, l'en-tête se trouve dans le 1er col de la gauche, et le contenu reprend les 11 autres cols. Votre solution détruit toute la réactivité qui a été mis en œuvre par Bootstrap.
Pourriez-vous expliquer exactement ce que le problème a été? Je ne suis pas vraiment sûr de vous et seulement réalisé le fix par essai et erreur, donc, une explication serait la bienvenue.

OriginalL'auteur Deryck

J'ai réussi à obtenir le même effet que Deruck, mais sans changer la structure de l'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;
}

OriginalL'auteur Edward G-Jones

En fin de compte, j'ai dû abandonner le CSS avant et générer les titres de transparence des Png à l'aide de GD. Pas l'idéal, mais me donne beaucoup plus de flexibilité en termes de positionnement. Si quelqu'un est intéressé à la rotation de script que j'utilise, c'est ci-dessous

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");

Modifié à partir de Jason Lau est génial script, qui peut être trouvé ici.

OriginalL'auteur terrorfall

Vous devez vous connecter pour publier un commentaire.

Voici un exemple.

CSS: