CSS DIV 固定宽度居中的方法
时间:2015-12-30
在布局一个网页时,非常重要的是一般网页主体布局都是水平居中的,其实就是对最外的DIV层设置居中布局,这时布局居中就是我们这里要介绍关键点。
DIV布局水平居中,关键使用CSS单词为margin:0 auto。
解释:DIV对象外边距左右为自动适应距离(根据对象设置宽度样式自动判断浏览器除去设置宽度后剩下宽度左右自动对等自然就实现布局居中),上下间距为0px。
关键实例CSS代码:
body{ text-align:center}
.box{ margin:0 auto; width:500px; height:100px; border:1px solid #00F}
首先对body设置个css内容居中,当然也是为了兼容各大浏览器默认情况下内容为居中初始设置,如何再对需要居中的选择器设置布局居中(margin:0 auto),固定宽度设置为500px,高度100px,CSS边框为1px蓝色实线边框。
这里设置500px宽度是任意设置,实际布局中根据需求设置,为了看到DIV被居中布局,所以加入高度和边框,以便观察到固定宽度居中实例效果。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS DIV 固定宽度居中的方法</title>
<style>
body{ text-align:center}
.box{ margin:0 auto; width:500px; height:80px; border:1px solid #00F}
</style>
</head>
<body>
<div class="box">CSS DIV 固定宽度居中的方法</div>
</body>
</html>
- 解决JQuery中的ready函数冲突
- 关于监视容器我们了解的5件事
- C#检测SqlServer中某张表是否存在
- Cobbler自动化批量安装linux服务器的操作记录
- Twemproxy——针对MemCached与Redis的代理
- 谁适合学Python?学了Python可以做什么工作?
- webservice今日遇到的二个问题:DataTable + Namespace
- php安全配置记录和常见错误梳理
- Flex:地图缩放平移效果(简易版)
- Mongodb副本集+分片集群环境部署记录
- 线上mongodb 数据库用户到期时间修改的操作记录
- 微信小程序“授权失败”场景的处理
- 动软.net代码生成器 win2008 r2下无法连接oracle,以及vs2008模板丢失的解决
- ASP.NET Web API 支持 CORS
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 开源一个 Sliverlight 导航框架
- 【DB笔试面试852】在Oracle中,什么是静默建库?
- 从 SVN 迁移到 Git
- 在 Windows 系统上配置 Apache Git 服务器
- WMCTF2020 部分Writeup&招新帖
- 【DB宝15】生产环境中,如何利用DG的备库来异机还原一个新库?
- Java命令执行学习笔记
- SAP UI5应用DatePicker控件的设计明细
- 如何根据自己的实际需求开发属于自己的sublime text插件
- Sony Z13 系列笔记本安装 NVIDIA 官方最新版显卡驱动程序
- 通过网页进行 iOS 应用内部分发
- 【DB笔试面试853】在Oracle中,什么是手动建库?手动建库有哪些步骤?
- 使用 Intel HAXM 为 Android 模拟器加速,媲美真机
- NHibernate 使用 SqlQuery
- 谈谈 INotifyPropertyChanged 的实现