web-dev-qa-db-fra.com

Comment faire du texte verticalement et horizontalement dans une page HTML

J'ai une certaine expérience avec Java, C, bases de données, réseau etc..mais n'importe quoi relativement avec HTML, je suis uneggyer.La seule chose que je cherche est de centrer deux mots au milieu de la page (cette page n'aura que ces deux mots).

                                Word1
                          WORDWORDWORDWORD2

J'ai essayé un logiciel WYSIWYG comme Kompozer, mais lorsque j'ai regardé le code source, il avait généré un code statique horrible avec beaucoup de <br> Pour réaliser le centre vertical de la page.Touton pourrait m'aider à trouver une bonne solution à ce problème

htmlcsstext-alignment
13
tt0686

Centrage horizontalement est facile - centrage verticalement est un peu délicat dans CSS car il n'est pas vraiment supporté (en plus des cellules de table <td>, qui est mauvais style pour la mise en page sauf si une table est vraiment nécessaire comme une table). Mais vous pouvez utiliser des balises HTML sémaniquement correctes et appliquer des propriétés d'affichage de table.

C'est une solution possible - il existe de nombreuses approches, Voici un bon article sur cela .

Dans votre cas, quelque chose comme ça devrait être suffisant:

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Hello World</title>
        <style>

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        body {
            display: table;
        }

        .my-block {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        </style>
    </head>
    <body>
    <div class="my-block">
       Word1<br />
       WORDWORDWORDWORD2
    </div>
    </body>
</html>
25
acme

Vous pouvez mettre le texte à l'intérieur d'un <div> et aligner le texte en utilisant CSS:

<div style="text-align:center;">
    Word1<br />
    WORDWORDWORDWORD2
</div>

les <div> est un élément de bloc qui signifie qu'il sera étiré à 100% de largeur et le texte sera au centre de la page.

jsfiddle exemple

2
Teneff

La meilleure façon de le faire serait la suivante:

Depuis que vous dites que vous êtes nouveau, je montre toute la structure du document pour vous. Le style devrait aller dans l'étiquette de tête de sorte qu'il soit chargé d'abord et que vous devriez éviter le style en ligne autant que possible .

<!DOCTYPE html>
<html>
    <head>
    <style>
    .center{
        text-align:center;
    }
    </style>
    </head>
    <body>
       <div class="center">
           <p>Word1</p>
           <p>WORDWORDWORDWORD2</p>
        </div>
    </body>
</html>
1
Chris Sobolewski

Juste le faire comme

<div style="text-align:center;">
   Word1<br />
   WORDWORDWORDWORD2
</div>
0
irfanmcsd

le meilleur moyen est de le mettre dans un élément comme DIV. Inside Div, vous pouvez facilement centrer le texte avec text-align: center; (en supposant que vous définissez une certaine largeur sur cette div). Ensuite, vous pouvez centrer cette div sur la page en ajoutant du style de marge automatique (margin: 0px auto;)

W3 manuel sur le centrage; -)

0
Gatekeeper