Dev Faq
7
votes

Tournez le texte -90deg et aligner verticalement avec DIV

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

html: xxx

css: xxx

Le résultat est comme . Il s'agit d'un thème WordPress, avec Twitter Bootstrap implémentée ainsi qu'un curseur complet de largeur. J'ai confirmé que Bootstrap et le curseur ne contiennent pas de CSS contradictoires.

2 commentaires

Comment voulez-vous que le texte soit aligné? Centre?

Oui s'il vous plaît, ce serait génial

5 Réponses :

11
votes

Je ne sais pas pourquoi vous avez eu inférieur: 0%; Gauche: 0%; code> en premier lieu, mais la supprime les résultats dans votre objectif souhaité, je crois.

Voici un exemple. h2>

CSS: H2> 
.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;
}

4 commentaires

A peur non, le texte ne reste pas au centre de la Div. Voir Capture d'écran ici ici i.Imgur.com/ufhbsiw.jpg

Je devais changer légèrement / de manière significative votre HTML et CSS dans celui-là, alors prenez une attention particulière

N'aidez pas que vous changez toute la mise en page, le titre se trouve dans 1 col dans la gauche et le contenu prend les 11 autres cols. Votre solution détruit toute réactivité implémentée par Bootstrap.

Pourriez-vous s'il vous plaît expliquer exactement ce que le problème était? Je ne suis pas vraiment sûr et je n'ai atteint que la solution par essais et erreurs, une explication serait donc appréciée.

2
votes

J'ai réussi à obtenir le même effet que Déreck mais sans modifier la structure du HTML.

Jsfiddle xxx

0 commentaires
0
votes

À la fin, j'ai dû abandonner le front CSS et générer les titres en tant que PNG transparents utilisant GD. Pas idéal, mais me donne beaucoup plus de flexibilité en termes de positionnement. Si quelqu'un est intéressé par le script de rotation que j'utilise, il est inférieur à xxx

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

0 commentaires
2
votes

Il y a une propriété CSS qui fait tourner le texte et oriente les blocs contenant: mode d'écriture

Voici un JS Fiddle exemple.

0 commentaires
4
votes

Entrez la description de l'image ici

HTML H1> 
.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;
}

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor