分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

css水平居中

发布时间:2023-09-06 01:26责任编辑:顾先生关键词:暂无标签

css居中

  1. 行内元素居中
    只针对行内元素居中的话,如文字,按钮等inline显示模式的元素,居中方法可给其父元素添加text-align即可,如果块级元素被设置成inline的话,也是适用的,但在收到float影响时会失效。

  2. 块级元素居中
    • 定宽块级元素居中
      如果块级元素的宽度固定可给其设置margin为auto来实现居中,margin:0 auto; 的意思是上下边距为0,左右边距自适应为相同值,完成写法为margin:0 auto 0 auto ; 四个参数分别代表上右下左四个边距。
    • 限制条件,固定宽度,否则块级元素默认占据父元素一整行,此设置失效,对浮动元素无效。
  3. 不定宽块级元素居中
    1. 包裹在ttable标签中,然后给table标签设置margin: 0 auto 实现居中。
    2. 或给元素设置display: table 让后给元素设置margin : 0 auto 实现居中。
    3. 让父级浮动,设置display:relative; left:50%; 给子元素设置display:relative; -left:50%;实现居中效果;
     ???<div class="wrap"> ?????<div class="inner">不定宽居中元素</div> ???</div> ???<style> ???????.wrap { ?????????float: left; /* 让父元素自适应子元素的宽度 */ ?????????position: relative; ?????????left: 50%; ??/*让父元素左边在祖先元素的中线上*/ ???????} ???????.inner { ?????????position: relative; ?????????left: -50%; /*让居中元素,相对父元素向左移动一半*/ ???????} ??????</style>

css水平居中

原文地址:http://www.cnblogs.com/guolintao/p/7872507.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved