Comment puis-je verticalement aligner une <table> au milieu d'une hauteur fixe <div>?

Pourquoi le code ci-dessous pas la cause de la <table> être verticalement alignées dans le milieu de la <div>?

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

Je veux le <table> dans le milieu de la <div>, mais il est au top! Comment puis-je résoudre ce problème?

Merci pour vos futurs conseils.

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

OriginalL'auteur LostLord | 2010-10-31

  1. 6

    À l'extérieur des cellules de tableau, vertical-align définit l'alignement vertical du texte dans une ligne, plutôt que l'alignement vertical de l'ensemble des éléments comme votre table.

    Toutefois, si vous définissez display: table-cell; sur votre <div>, qui semble pour obtenir l'effet que vous voulez.

    Je ne suis pas sûr de savoir comment beaucoup de navigateurs prennent en charge cette même si. J'ai vérifié dans Chrome 6, Firefox 2 et Opera 10.5, et ils vont bien avec elle. Internet Explorer pourrait être une autre affaire.

    grâce 4 ur réponse / je l'ai tester / mais quand j'ai utilisé display: table-cell; la largeur css ne fonctionne pas parfaitement / une idée?
    largeur css ne fonctionne pas parfaitement” — pourriez-vous décrire comment il ne fonctionne pas?
    salut cher ami, il semble qu'il n'y est pas de définir la largeur et la largeur de la div 4-5px...
    vraiment? Le <div> semble toujours avoir la bonne largeur sur ma page de test: pauldwaite.co.royaume-uni/test-pages/4064677 quel navigateur êtes-vous tester?

    OriginalL'auteur Paul D. Waite

  2. 0

    Essayez ceci:

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

    table est un élément de type block. Pour l'obtenir à alignées à la verticale, je pense qu'il doit être affiché en tant que inline. inline-block sera souvent vous donner le meilleur des deux mondes dans des situations comme celles-ci. Cheers!

    Ne sont pas des exemples de ce qu'il a déjà fait?
    Mon mauvais; j'ai mal lu sa question. J'ai mis à jour ma réponse en conséquence.
    bonjour - merci pour vos réponses / display:inline-block n'est pas travaillé...
    Je pense qu'avec display: block, vous voulez vertical-align: middle sur le <table>, pas la <div>.

    OriginalL'auteur Jim Fell

  3. -2

    Son facile. Toujours utiliser ce >> style="vertical-align:middle" << à l'intérieur de chaque TD. Vous pouvez utiliser le haut, moyen et bas. Vous pouvez la pousser dans le CSS aussi.

    OriginalL'auteur KaiLynn Darkpixie

  4. -3

    essayez ceci:

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

    il a travaillé pour moi!!

    OriginalL'auteur Deepak Badiger