Dev Faq
9
votes

Comment puis-je aligner verticalement une au milieu d'une hauteur fixe
?

Pourquoi le code ci-dessous ne provoque-t-il pas le

code> à être aligné verticalement au milieu du
code>? 
<div style="width: 850px; height: 470px;vertical-align: middle;" align="center">
        <table style="padding-left: 20px; width: 700px; border: 10px groove #0033CC; background-color: #F9F9F9;">
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
    </div>

1 commentaires

W3schools est une ressource très utile pour ce genre de chose.

5 Réponses :

8
votes

En dehors des cellules de table, vertical-align définit l'alignement vertical du texte dans une ligne, plutôt que l'alignement vertical d'éléments entiers tels que votre table.

Cependant, si vous définissez Affichage: pile de table; sur votre

, qui semble atteindre l'effet que vous voulez.

Je ne sais pas combien de navigateurs le soutiennent cependant. J'ai choisi Chrome 6, Firefox 2 et Opera 10.5, et ils sont bien avec ça. Internet Explorer pourrait être une question différente.

4 commentaires

merci 4 votre réponse / je le teste / mais lorsque j'ai utilisé l'affichage: cellule de table; La largeur CSS n'a pas fonctionné parfaitement / aucune idée?

@Lostlord: "La largeur CSS n'a pas fonctionné parfaitement" - Pourriez-vous décrire Comment Cela n'a pas fonctionné?

Salut cher ami / Il semble qu'il n'y ait pas de set de largeur et de largeur de cette div est de 4-5px ...

@Lostlord: vraiment? Le

semble toujours avoir la largeur correcte sur ma page de test: Pauldwaite.co.uk/Test-Pages/4064677 Quel navigateur testez-vous?

0
votes

Essayez ceci: 

<body style="vertical-align:middle">
<table style="display:inline-block">
<!-- your stuff -->
</table>
</body>

2 commentaires

@Paul: Mon mauvais; J'ai mal interprété sa question. J'ai mis à jour ma réponse en conséquence.

Je pense que avec affichage: bloquer , vous voudriez vertical-align: Moyen sur le

, pas le
.

-3
votes

c'est facile. Utilisez toujours ceci >> style = "vertical-alignement: milieu" << à l'intérieur de chaque TD. Vous pouvez utiliser le haut, le milieu et le bas. Vous pouvez aussi pousser dans le CSS aussi.

0 commentaires
-4
votes

Essayez ceci: 

#centerAligned{
    text-align: center;
    margin-top: 50%;
}

0 commentaires
2
votes

Avez-vous essayé "Affichage: flex;"?

p> 

<div>
    <table>
        <tr>
          <td>Lorem</td>
          <td>Lorem</td>
          <td>Lorem</td>
        </tr>
        <tr>
          <td>2019</td>
          <td>2018</td>
          <td>2017</td>
        </tr>
    </table>
</div>

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