使用CSS居中浮动元素的方法介绍

这篇文章主要介绍了使用css居中浮动元素的方法介绍,是css入门学习中的基础知识,需要的朋友可以参考下

方法一

设置容器的浮动方式为绝对定位
然后确定容器的宽高 比如宽500 高 300 的层
然后设置层的外边距

 p{           width:500px;           height:300px;           margin:-150px 0 0 -250px;           position:absolute;           left:50%;           top:50%;           background-color:#000;   }

登录后复制

方法二

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

立即学习“前端免费学习笔记(深入)”;

nbsp;html>       Demo                         .p{               position:relative;               left:50%;               float:left;           }           .c{               position:relative;               float:left;               rightright:50%;           }              

           

Test Float Element Center

             

登录后复制

以上就是使用CSS居中浮动元素的方法介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2905790.html

(0)
上一篇 2025年3月11日 02:28:57
下一篇 2025年3月11日 02:29:31

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 详解CSS中使用inline-block来进行居中的示例

    这篇文章主要详解css中使用inline-block来进行居中的示例,使用的时候注意一下容器的宽度,需要的朋友可以参考下 迫切需要的方法:inline-block法居中。基本方法是使用 display: inline-block, vert…

    2025年3月11日
    200
  • CSS居中:最全面的CSS居中方法大全

    在web网页开发中,我们为了整个页面的美观性,以及用户的体验性,我们就会经常使用到css居中,在网页中它可以将图片或者文字以不同的居中方式展现出来,那么这些不同的居中方式如何实现呢?今天我们就来给大家介绍最为全面的css居中方法。 CSS居…

    2025年3月11日
    200
  • 详解CSS的居中方式

    CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天小编把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。 1 水平居中 1.1 内联元素水…

    2025年3月10日
    200

发表回复

登录后才能评论