margin居中显示
标签(空格分隔): margin居中
margin居中:
如下图的代码查看:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin塌陷</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.a{
width:780px;
height:50px;
background-color: red;
margin:0px auto;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
文字居中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin塌陷</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
div{
width:780px;
height:50px;
background-color: red;
margin:0px auto;
text-align: center;
}
/*水平居中必须有width,必须要明确width,文字水平居中使用text-align:center
2.只有标准流下的盒子才能使用margin:0auto
3.当一个盒子浮动了,固定定位了,绝对定位了,margin:0auto不能用了,
4.margin是居中盒子,不是居中文本*/
</style>
</head>
<body>
<div>文字</div>
<div class="a"></div>
</body>
</html>
- 总结:
水平居中必须有width,必须要明确width,文字水平居中使用text-align:center
2.只有标准流下的盒子才能使用margin:0auto
3.当一个盒子浮动了,固定定位了,绝对定位了,margin:0auto不能用了,
4.margin是居中盒子,不是居中文本
margin居中显示的更多相关文章
- CSS基础之居中显示
这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...
- css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)
1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div 设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...
- 多个div居中显示
页面中有多个div时我们希望并排居中显示,可以通过在并排显示的div上一层再加一个div,设定宽度,然后让其居中显示达到需要的效果. 关键是要对外层div设定宽度. <!DOCTYPE html ...
- css div居中显示的4种写法
Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...
- 绝对定位的DIV绝对居中显示
绝对居中:即在客户端上任何分辨率下纵横方向均居中 紫色的正方形为绝对定位的div position:absolute; top: 50%; left: 50%; 只能把div定位在以红色圈为起点的位置 ...
- div(固定宽度和不固定宽度)居中显示的方法总结
今天我总结一下css实现div居中的方法,有的是固定宽度的,还有的是不固定宽度的. 1.使用自动外边距实现DIV CSS居中 CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的mar ...
- extjs中grid中行内文本或图片居中显示
我是看了网上写的方法调试自己的代码来实现的,实现的方式是当加载store数据时改变grid的行样式,源码如下: html代码: <div id="weatherP_grid-body& ...
- 单独一个img标签的居中显示
针对页面当中通过img插入图片的时候,要保证这个图片在页面内容当中居中,一般的做法是在外面套一个div,通过给div加入 {margin:0 auto;} 来控制图片的居中. 那么如果针对后台上传的图 ...
- ul中li居中显示的table方法
废话不多,贴代码 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4 ...
随机推荐
- 一个简单的python爬虫程序
python|网络爬虫 概述 这是一个简单的python爬虫程序,仅用作技术学习与交流,主要是通过一个简单的实际案例来对网络爬虫有个基础的认识. 什么是网络爬虫 简单的讲,网络爬虫就是模拟人访问web ...
- 使用Let's Encrypt搭建永久免费的HTTPS服务
1.概述1.1 HTTPS概述HTTPS即HTTP + TLS,TLS 是传输层加密协议,它的前身是 SSL 协议.我们知道HTTP协议是基于TCP的.简而言之HTTPS就是在TCP的基础上套一层TL ...
- JavaScript代码优化
1.if else 语句中变量赋值为布尔值 if (a > b) { status = true; } else { status = false; } // 可以简化为 status = a ...
- htm,css,javascript及其他的注释方式
转自:http://www.cnblogs.com/dapeng111/archive/2012/12/23/2829774.html 一.HTML的注释方法<!-- html注释:START ...
- 使用SQL SERVER 来自动发送邮件
可以使用SQL SERVER 来发送自动邮件,主要是使用SQL SERVER 的dbo.sp_send_dbmail 存储过程(在msdb数据库中). 具体步骤如下: Step1: 编写要发送的邮件内 ...
- ajaxFileUpload 文件上传
源码: jQuery .extend({ createUploadIframe : function(id, uri) {//id为当前系统时间字符串,uri是外部传入的json对象的一个参数 //c ...
- 20175311 2018-2019-2 《Java程序设计》第五周学习总结
20175311 2018-2019-2 <Java程序设计>第5周学习总结 教材学习内容总结 抽象类和具体类的区别在于抽象类中有抽象方法而具体类中没有.且抽象类不能实例化. 接口:如果一 ...
- javaweb开发大致流程
- android全屏/沉浸式状态栏下,各种键盘挡住输入框解决办法
https://blog.csdn.net/smileiam/article/details/69055963
- Java读取Excel并与SqlServer库中的数据比较
先说说需求.在SQL server数据库中的表里存在一些数据,现在整理的Excel文档中也存在一些数据,现在需要通过根据比较某个字段值(唯一)来判断出,在库中有但excel中没有的数据. 大概的思路就 ...