关于前端元素居中的方法集合

最新推荐文章于 2024-04-26 21:29:15 发布

VIP文章码小目

最新推荐文章于 2024-04-26 21:29:15 发布

阅读量2.2k

点赞数 1

分类专栏：元素居中文章标签： html5 css css3 javascript

本文链接：https://blog.csdn.net/weixin_68030167/article/details/123780128

版权

元素主要是块级元素 ,行内块元素,行元素三种;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    1.行内元素:
    超链接：<a></a>
    加粗：<strong></strong> <b></b>
    图片：<img src=" " />
    输入框：<input type="text">
    下拉框：<select name=" " id=" "></select>
    标签：<label for=" "></label>
    行内元素：<span></span>
    文本框：<textarea name="" id="" cols="30" rows="10"></textarea>
    按钮：<button></button>
    2.块级元素
    块内元素：<div></div>
    段落标签：<p></p>
    表格：<table></table>
    表格标题：<caption></caption>
    表单：<form action=" "></form>
    标题：h1~h6
    列表：<ul>
        <li></li>
    </ul>
    <dl>
        <dt></dt>
    </dl>
    <dl>
        <dd></dd>
    </dl>
    2.块级元素与行内元素的区别
    （1）块级元素独占一行不与其他元素共享，而行内元素则可以和其他元素共享一行
    (2)块级元素可以直接设置宽高，行内元素则不可以直接设置宽高
    (3)块级元素可以包含其他块级元素和行内元素，而行内元素只能包含文本和其他行内元素

</body>
</html>

居中包括水平居中和垂直居中.

块级元素 display:block; 可设置宽高加背景颜色纵向排列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <