Maison  >  Article  >  interface Web  >  css让浮动元素水平居中_html/css_WEB-ITnose

css让浮动元素水平居中_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:36:56998parcourir

对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中。

对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。如下:

HTML 代码:

<div class="box">    <p>我是浮动的</p>    <p>我也是居中的</p></div>

 

CSS 代码:

.box{    float:left;    position:relative;    left:50%;}p{    float:left;    position:relative;    right:50%;}

 

这样就解决了浮动元素水平居中了;

父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%或者子元素相对左移动-50%也就可以了

 

Déclaration:
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