html块级元素对齐方式,CSS如何水平对齐块级元素
CSS 水平对齐
在 CSS 中,可以使用多种属性来水平对齐元素。
对齐块元素
块元素指的是占据全部可用宽度的元素,并且在其前后都会换行。
块元素的例子:
对于文本对齐,请参见 CSS 文本一章。
在本教程中,我们将向您展示出于布局目的如何水平对齐块级元素。
使用 margin 属性来水平对齐
可通过将左和右外边距设置为 "auto",来对齐块元素。
注释:除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
把左和右外边距设置为 auto,规定的是均等地分配可用的外边距。结果就是居中的元素:
实例
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
提示:如果宽度是 100%,则对齐没有效果。
注释:在 IE5 中,对于块元素存在一个外边距处理方面的 BUG。如需使上面的例子在 IE5 中有效,请添加一些额外的代码。
使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位:
实例
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
注释:绝对定位元素会被从正常流中删除,并且能够交叠元素。
跨浏览器兼容性问题
当像这样对齐元素时,对
元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
当使用 position 属性时,IE8 以及更早的版本存在一个问题。如果容器元素(在我们的案例中是
实例
body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
使用 float 属性来进行左和右对齐
对齐元素的另一种方法是使用 float 属性:
实例
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
跨浏览器兼容性问题
当像这样对齐元素时,对
元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
当使用 float 属性时,IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时,请始终设置 !DOCTYPE 声明:
实例
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
标签:块级,元素,float,width,right,对齐,margin,CSS
来源: https://www.cnblogs.com/degkr/p/13726420.html
html块级元素对齐方式,CSS如何水平对齐块级元素相关推荐
- html文字两端对齐 w3school,CSS实现两端对齐效果
两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align w3school指出, ...
- 弹性盒子display:flex——justify-content主轴方向对齐方式、align-items交叉轴对齐方式、 flex-direction修改主轴方向、flex-wrap换行
1.css3弹性盒子 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性盒布局模型的目的是提 ...
- 自动居中对齐 html,css如何居中对齐?
在我们开发前端页面的时候,为了让页面效果美观,会出现需要居中效果的地方.下面本篇文章就来给大家介绍一下使用CSS设置居中对齐的方法,希望对大家有所帮助. 1.text-align:center -- ...
- css中脱离标准流的三种方式,CSS的三种手段让元素脱离标准本文档流
1.浮动 浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...
- html左浮动不管用图片往下放,html - 如何在HTML / CSS中水平对齐图像(浮动和显示内联块不起作用) - 堆栈内存溢出...
我有一个水平排列的图像库,但是后来我做到了,以便当您将鼠标悬停在图像上时,图像上会覆盖文字,现在我以前没有什么东西可以用来使它们水平排列. 我尝试在所有选择器上使用左浮点数(同样使用display i ...
- Bootstrap笔记(三) 网格系统 - row与column的对齐方式
网格系统 - row与column的对齐方式 row的垂直对齐方式 column的水平对齐方式 row的垂直对齐方式 我们可以使用 .align-items-* 类别设定row的垂直对齐方式. .al ...
- python openpyxl 自动设置excel列宽及行高,单元格对对齐方式
import pandas as pd from openpyxl import load_workbook from openpyxl.utils import get_column_letter ...
- 表格、表格CSS属性及HTML属性、表单元素、type类型、内联块的对齐方式
表格 table thead tbody tfoot table>tr>td(th加粗居中显示) css属性 border-sapcing:数值px; 表格边框设置为细线 borde-co ...
- css text-align属性,行内元素,块级元素居中详解
一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...
最新文章
- 大型AI已有自主意识了?LeCun开喷Open AI首席科学家
- SQL分割字符串,SQL按照指定字符分割字符串,SQL处理字符串...
- MDNS的漏洞报告——mdns的最大问题是允许广域网的mdns单播查询,这会暴露设备信息,或者被利用用于dns放大攻击...
- SQL Activity Monitor
- MySQL复制常用拓扑结构详解
- nodejs中处理回调函数的异常
- 从文本分类问题中的特征词选择算法追踪如何将数学知识,数学理论迁移到实际工程中去...
- js json过滤_如何在浏览器不崩溃的情况下过滤 200 万行数据?
- MySQL 8.0 error 2059: Authentication plugin 'caching_sha2_password' cannot be loaded
- code review手记3
- Missing artifact com.oracle:ojdbc6:jar:11.2.0.1.0问题解决 ojdbc包pom.xml出错
- mysql 2100_mysql增量备份与恢复实战
- JDK 1.6 API 中文版
- ARM嵌入式系统的问题分析与总结
- ssm框架体检管理系统源码+文档
- 2MSL的特点及意义
- 吊打天猫精灵等“本土”智能音箱,HomePod做得到吗?...
- MATLAB实现混淆矩阵
- C#字节数组与字符串相互转换代码案例
- C#入门学习-----图书阅读器(WPF 用户控件技术)
热门文章
- jlink_gdb_server
- 不好好做图的NSC系列(八):ggplot2重现Nature文章多组柱状图+散点,这是一场硬仗
- “老公,我穿这衣服好看吗”终于破解了
- 在创业公司的第三天----(犯事了)
- 梦幻西游手游三界奇缘答题 文字解答
- [养静气] - 安得静心有洞天
- Codeforces - Choosing The Commander
- DX实习小记☆[持续更新]
- Linux安装arthas(阿尔萨斯)
- couple和double的区别_couple是什么意思_couple在线翻译_英语_读音_用法_例句_海词词典...