Maison > interface Web > tutoriel HTML > 如何用css实现元素水平与垂直居中_html/css_WEB-ITnose

如何用css实现元素水平与垂直居中_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 08:59:09
original
1105 Les gens l'ont consulté

如果文章对你有帮助,请点喜欢并关注,这将是我最大的动力,谢谢

1.水平居中

1.1.文字,图片以及内联元素:

如果希望居中的是内联元素或者是文字图片text-align:center;

1.2.块状元素

1.2.1.对于已设置宽度的块状元素:

margin:0 auto;----------------------让margin的左右自适应,通常是居中

1.2.2.对于未设置宽度的块状元素:

1.使用table标签html:

<table>        <tr>            <td>                <div id="container"></div>            </td>        </tr>    </table>
Copier après la connexion

css:

table{     margin:0 auto;}
Copier après la connexion

这个不常用,因为添加了更多无意义的标签2.通过将子块状元素变成行内元素html:

<div>    <p>居中示例</p></div>
Copier après la connexion
Copier après la connexion

css:

p{     display:inline;}div{     text-align:center;}
Copier après la connexion

假设p在div内部,要让p居中先给外层元素设置text-align:center,这个意思是让div里面的内联元素居中,然后将p变成内联元素,即可。3.通过positionhtml:

<div>    <p>居中示例</p></div>
Copier après la connexion
Copier après la connexion

css:

div{     float:left;       position:relative;      left:50%;}p{     position:relative;       right:50%;}
Copier après la connexion

float:left,目的是让父元素靠左并且宽度与子元素等宽;然后相对于原先的位置,向右移动50%,此时该元素的left为50%+(50%父元素自身宽度)然后将子元素相对于原先的位置,向左移动50%(这50%是基于父元素的宽度),此时居中。

2.垂直居中

2.1.对于已设置高度的单行文本

只需将父元素的height值与line-height的值设置相同即可

2.2.对于已设置高度的多行文本

1.使用table标签html:

    <table>        <tr>            <td>                <p>aaaaa</p>                <p>aaaaa</p>                   <p>aaaaa</p>            </td>        </tr>    </table>
Copier après la connexion

css:

table{            height: 500px;            background-color: #aaa;        }
Copier après la connexion

因为table标签中的td拥有标签隐式的样式:vertical-align:middle;2.通过table-cellhtml:

   <p>aaaaa</p>   <p>aaaaa</p>      <p>aaaaa</p>
Copier après la connexion

css:

p{     display:table-cell;     vertical-align:middle;}
Copier après la connexion

table-cell的意思是让元素以表格单元的形似表现,但是只支持IE8以上浏览器​

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal