La beauté de l'utilisation combinée de display:table et display:table-cell en CSS

Le contenu de cet article est de présenter les avantages de display:table et display:table-cell en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Le tableau et le tableau-cellule de Display sont généralement peu utilisés, donc peu de gens y prêtent attention, mais les deux vous surprendront lorsqu'ils uniront leurs forces !

Une question se pose ici, la suivante, comment centrer verticalement un texte multiligne dans un bloc ? En ce qui concerne le centrage vertical, vous penserez au centrage vertical d'une seule ligne de texte. La hauteur de ligne est égale au centrage vertical des éléments au niveau du bloc, au positionnement ou à la disposition flexible. Mais ici, je présente display: table et table-cell comment centrer verticalement un texte multiligne. Même s'il n'a pas l'air d'être beaucoup utilisé, il est quand même utile à certains moments, comme suit :

Entrez directement le code :

html:

    <p>
        </p><p>会议认为，党的十八大以来，我国经济发展取得历史性成就、
                     发生历史性变革，为其他领域改革发展提供了重要物质条件。经济实力
                     再上新台阶，经济年均增长7.1%，成为世界经济增长的主要动力源和稳定器。
        </p>
    

css:

       .parent {
           display: table;
           width: 300px;
           height: 300px;
           text-align: center;
       }
       .son  {
           display: table-cell;
           height: 200px;
           background-color: yellow;
           vertical-align: middle;
       }

Après avoir lu le code, vous avez tout de suite compris. Ici, il suffit de paramétrer le. conteneur à display:table Ensuite, il devient un élément de tableau au niveau du bloc, et le sous-élément display:table-cell fait du sous-élément une cellule de tableau. Ensuite, tout comme dans le tableau, ajoutez vertical-align: middle au sous-élément. -élément, et le texte multiligne est centré verticalement La. N'est-ce pas très direct et concis~

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!