HTML设置水平居中的几种方式

HTML水平居中的几种方式
水平居中分为块级元素，行内元素和行内块状元素

HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：

display:inline;转换为行内元素
display:block;转换为块状元素
display:inline-block;转换为行内块状元素

在HTML5中，可以自定义标签，在任意定义标签中，加入**display:block;**即可，当然也可以是行内或行内块状。

行内元素：常见的span，修饰字体,

行内元素特征：1.设置宽高无效2.对margin仅设置左右方向有效，上下无效；padding设置上下左右皆有效3.不会自动进行换行

块状元素：代表性就是div
块状元素特征:1.能够识别宽高2.margin和padding的上下左右均对其有效3.可以自动换行4.多个块状元素标签写在一起，默认排列方式是从上至下

行内块状元素：使用比较多，结合了行内元素和块状元素的特性，各有取舍

行内块状元素特征：1.不自动换行2.能够识别宽高3.默认排列方式为从左到右

文字垂直居中的小技巧
CSS没有提供垂直居中的代码，这里有一个小技巧
解决方案: 让文字行高等于盒子的高度就可以让文字在当前盒子内垂直居中

hight:40px
line-hight:40px

HTML设置水平居中的几种方式相关推荐

关于css垂直水平居中的几种方式
关于css垂直水平居中的几种方式 css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简 ...
html正方形边框,详解HTML设置边框的三种方式
HTML设置边框的三种方式 border-width: 1px 2px 2px; border-style: solid dashed dotted; border-color:red green b ...
HTML设置边框的三种方式
HTML设置边框的三种方式文章目录 HTML设置边框的三种方式 1.边框的组成: 2.复合样式 3.单一设置这样代表上边框右边框下边框左边框分别对四条边框进行设置两个值代表:上下边框左 ...
div水平居中的两种方式
div水平居中的两种方式文章目录 div水平居中的两种方式 1.使用margin:0px auto; 2.使用calc自动计算margin-left实现水平居中 1.使用margin:0px aut ...
response设置编码的三种方式以及比较
https://blog.csdn.net/u010653908/article/details/53994021 response设置编码的三种方式以及比较 2017年01月03日 14:12:46 ...
response设置编码的三种方式
在java后台的Action代码或者Servlet代码中用response的方法来设置输出内容的编码方式,有以下三个方法: 1.response.setCharacterEncoding(" ...
H5+CSS3 实现div垂直水平居中的几种方式
实现div垂直水平居中的11种方法 <div class="father"><div class="son"></div> ...
【feign】OpenFeign设置header的5种方式
文章目录设置Feign的Header信息概述示例说明在`@RequestMapping`注解里添加headers属性在方法参数前面添加`@RequestHeader`注解在方法或者类上添加 ...
echarts饼图自定义设置颜色的三种方式
第一种方式 option下 color:['#45C2E0', '#C1EBDD', '#FFC851','#5A5476','#1869A0','#FF9393'], 整体代码如下: option ...

HTML设置水平居中的几种方式

HTML设置水平居中的几种方式相关推荐

最新文章

热门文章