当前位置: 首页 > news >正文

div如何居中

  整理一点关于div居中的方法。哪里有不妥欢迎大家拍砖~

  

  • div里的内容如何居中:

  水平居中(非块级元素): text-align:center; 

  垂直居中:

  1.  vertical-align:middle; 

  2. 内容是文字的话,可以将height和line-height设置成一样的值;

  简单方法(但不是全部兼容):

      
1 display: -webkit-flex;
2 display: flex;
3 -webkit-align-items: center;
4 align-items: center;
5 -webkit-justify-content: center;
6 justify-content: center;
 

 

  • 整个div如何居中:

  定宽div水平居中: margin: 0 auto;  0表示上下边距是0,auto表示margin-left和margiin-top为auto;

  不定宽div水平居中:

  1. 第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
  2. display:inline; text-align:center; 

  3. 通过给父元素设置 float,然后给父元素设置 position:relative; left:50%; ,子元素设置  position:relative; left:-50%; 
     div水平居中:父div设置  width:100%; 

转载于:https://www.cnblogs.com/littleaway/p/4707434.html

相关文章:

  • BestCoder Round #50 (div.1) 1001 Distribution money (HDU OJ 5364)
  • Mac 上安装Win10 [missing operating system]解决方法
  • 使用 adb logcat 显示 Android 日志
  • dos移动一个文件内的所有内容到另一个文件
  • iPhone手机屏幕的尺寸180330更新
  • 二叉树的遍历
  • charles使用教程指南
  • 爬虫小demo
  • Android学习路径(十)怎么会Action Bar堆放在布局
  • 论如何优雅的处理回文串 - 回文自动机详解
  • 按值传参,按引用传参,按指针传参的区别
  • linux 下Time_wait过多问题解决
  • SVN目录对号图标(更新、冲突)不显示
  • 神奇的make自动生成include file的功能
  • SLAM学习笔记(2)SLAM算法
  • 11111111
  • 2017届校招提前批面试回顾
  • CEF与代理
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • gf框架之分页模块(五) - 自定义分页
  • js
  • linux学习笔记
  • React+TypeScript入门
  • weex踩坑之旅第一弹 ~ 搭建具有入口文件的weex脚手架
  • windows-nginx-https-本地配置
  • 模型微调
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 学习JavaScript数据结构与算法 — 树
  • 用Node EJS写一个爬虫脚本每天定时给心爱的她发一封暖心邮件
  • 在weex里面使用chart图表
  • ​软考-高级-信息系统项目管理师教程 第四版【第14章-项目沟通管理-思维导图】​
  • #FPGA(基础知识)
  • #Linux(Source Insight安装及工程建立)
  • #LLM入门|Prompt#1.7_文本拓展_Expanding
  • #考研#计算机文化知识1(局域网及网络互联)
  • $.extend({},旧的,新的);合并对象,后面的覆盖前面的
  • (Matlab)基于蝙蝠算法实现电力系统经济调度
  • (八)Spring源码解析:Spring MVC
  • (第27天)Oracle 数据泵转换分区表
  • (附源码)计算机毕业设计ssm高校《大学语文》课程作业在线管理系统
  • (九十四)函数和二维数组
  • (五)关系数据库标准语言SQL
  • .babyk勒索病毒解析:恶意更新如何威胁您的数据安全
  • .net framework 4.0中如何 输出 form 的name属性。
  • .NET 的程序集加载上下文
  • .NET 反射 Reflect
  • .net 简单实现MD5
  • .net反混淆脱壳工具de4dot的使用
  • .NET使用HttpClient以multipart/form-data形式post上传文件及其相关参数
  • .Net下使用 Geb.Video.FFMPEG 操作视频文件
  • .Net组件程序设计之线程、并发管理(一)
  • /etc/shadow字段详解
  • @property @synthesize @dynamic 及相关属性作用探究
  • @test注解_Spring 自定义注解你了解过吗?
  • @vue/cli脚手架