行内元素与块级元素水平居中的方法

最新推荐文章于 2024-07-25 08:14:42 发布

小李小李~啦啦啦

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量915

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/weixin_43164078/article/details/114292120

版权

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)块级元素可以包含其他块级元素和行内元素，而行内元素只能包含文本和其他行内元素
3.行内元素垂直居中得方法：
（1）父级元素采用flex布局 display: flex;，并且属性设置为

        justify-content: center;
        align-items: center;

子元素即可实现居中垂直
代码测试如下：

 <style>
        div{
            width: 300px;
            height: 300px;
            background-color: brown;
            display: flex;
            justify-content: center;
            align-items: center;
          
        }
        
    </style>
</head>
<body>
   <div>
       <p>我要垂直</p>
   </div>
</body>

运行结果如下：

在这里插入图片描述
4.块级元素垂直居中得方法
（1）父元素相对定位，子元素绝对定位
left 和top得属性均为父元素的一半
margin-top, margin-left得值为子级元素一半的负值
代码如下：

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: brown;
            position: relative;//父级采用相对定位
            
        }//父级元素的css样式
        div p{
            width: 100px;
            height: 100px;
            border: 2px solid black;
            position: absolute;//子级采用绝对定位
            /*将top left属性设置为父级元素的一半   此时子元素的左上角位于父元素的中心*/
            top: 150px;
            left: 150px;
            /*设置margin-top  margin-left设置为子元素宽高的一半的负值*/
          margin-top: -50px;
          margin-left: -50px;
            
        }//子级css样式
        
    </style>
</head>
<body>
   <div>
       <p></p>
   </div>

 测试结果如下：

在这里插入图片描述

（2）父元素相对定位，子元素绝对定位将top left bottom right的值设置为0 ,并且将子元素的margin:auto;
代码如下：

 <style>
        div{
            width: 300px;
            height: 300px;
            background-color: brown;
            position: relative;
            
        }
        div p{
            width: 100px;
            height: 100px;
            border: 2px solid black;
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            margin: auto;
            
        }
        
    </style>
</head>
<body>
   <div>
       <p></p>
   </div>
</body>

运行结果
在这里插入图片描述
（3）父元素display:flex;布局
子元素：margin:auto;
代码如下：

<style>
        div{
            width: 300px;
            height: 300px;
            background-color: brown;
            display: flex;
            
        }
        div p{
            width: 100px;
            height: 100px;
            border: 2px solid black;
            margin: auto;
            
        }
        
    </style>
</head>
<body>
   <div>
       <p></p>
   </div>
</body>

运行结果：
在这里插入图片描述

小李小李~啦啦啦

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
行内元素与块级元素水平居中的方法

1.行内元素:超链接：<a></a>加粗：<strong></strong> <b></b>图片：<img src=" " />输入框：<input type="text" >下拉框：<select name=" " id=" "></select>标签：<label for=" "></label>行内元素：<span></spa
复制链接

扫一扫