CSSzxx日报

最新推荐文章于 2023-02-08 23:23:37 发布
最新推荐文章于 2023-02-08 23:23:37 发布
阅读量98 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxxsdg/article/details/111474299
版权

CSS行内、块级、行内块、浮动、定位，水平垂直居中方法

1.行内元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            width: 600px;
            height: 400px;
            background-color: red;
            
			margin: auto;            /红盒子居中
            
            text-align: center;          /文字（行内）水平居中
            line-height: 400px;          /文字（行内）垂直居中
        }
        .two {
        }
    </style>
·</head>
<body>
<div class="one">
    <span class="two">span</span>
</div>
</body>
</html>

2.块级元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            width: 600px;
            height: 400px;
            background-color: red;

            margin: auto;               /红盒子居中
            padding-top: 1px;           /防止顶部塌陷
        }
        .two {
            width: 60px;
            height: 60px;
            background-color: gold;

            text-align: center;         /文字水平居中
            line-height: 60px;          /文字垂直居中

            margin: 200px auto 0;           /黄盒子（块级），水平居中，垂直距顶部200px
            transform: translateY(-50%);    /黄盒子（块级），位移自身一半高度(30px)，使它垂直居中
        }
    </style>
</head>
<body>
<div class="one">
    <div class="two">div</div>
</div>
</body>
</html>

3.行内块元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            width: 600px;
            height: 400px;
            background-color: red;

            margin: auto;               /红盒子居中
            
            text-align: center;             /黄盒子（行内块）水平居中，文字也居中
        }
        .two {
            width: 60px;
            height: 60px;
            background-color: gold;
            display: inline-block;
            
            line-height: 60px;          /文字垂直居中

            margin-top: 200px;              /黄盒子（行内块），垂直距顶部200px
            transform: translateY(-50%);    /黄盒子（行内块），位移自身一半高度(30px)，使它垂直居中

        }
    </style>
</head>
<body>
<div class="one">
    <div class="two">行内块</div>
</div>
</body>
</html>

4.浮动元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            width: 600px;
            height: 400px;
            background-color: red;
            
            margin: auto;                /红盒子居中
        }
        .fl {
            width: 60px;
            height: 60px;
            background-color: gold;
            float: left;
                        
            text-align: center;          /文字水平居中
            line-height: 60px;           /文字垂直居中
            
            margin-left: 50%;                  /黄盒子（浮动），水平距左边300px
            margin-top: 200px;                 /黄盒子（浮动），垂直距顶部200px
            transform: translate(-50%,-50%);   /位移自身一半宽(30px)高(30px)，使它水平垂直居中
        }
    </style>
</head>
<body>
<div class="one">
    <div class="fl">浮动</div>
</div>
</body>
</html>

5.定位元素

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            width: 600px;
            height: 400px;
            background-color: red;
            position: relative;
            
            margin: auto;             /红盒子居中
        }
        .two {
            width: 60px;
            height: 60px;
            background-color: gold;
            position: absolute;
            
            text-align: center;       /文字水平居中
            line-height: 60px;        /文字垂直居中
            
            left: 50%;                           /黄盒子（定位），水平距左边300px
            top: 50%;                            /黄盒子（定位），垂直距顶部200px
            transform: translate(-50%,-50%);     /位移自身一半宽(30px)高(30px)，使它水平垂直居中
        }
    </style>
</head>
<body>
<div class="one">
    <div class="two">定位</div>
</div>
</body>
</html>
闪冬钢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
行内元素与块级元素居中方法
qq_41884544的博客
03-02 5105
一、行内元素 1. 水平居中 方法一：text-algin:center 父元素设置：text-align:center 说明： text-align只能对行内元素起作用，对块级元素不起作用 text-align会被后代元素继承 <style> .outer{ width: 200px; height: 200px; background-color: #bfa; text-align:center; } </style> <div class="
CSS行内、块级、行内块、浮动、定位，水平垂直居中方法
冯上
12-21 484
CSS元素水平垂直居中方法 1.行内元素 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one { width: 600px; height: 400px; backg
css行内块元素垂直居中
最新发布
u011624157的专栏
02-08 688
css行内块元素垂直居中
CSS基础之---如何实现块元素、行内元素、行内块元素水平居中。
wu67321的博客
06-02 279
块级元素的水平居中 必须满外足宽内窄 代码 margin left:auto; margin right:auto; 特性：块级元签在是父框中水平居中 2.行内元素、行内块元素、文字的水平居中 代码 text-align: center; 特性：本标签内的内容在本框内水平居中 ...
1204css日报
weixin_47604603的博客
12-05 126
css引入方式 内嵌式 0908 例子
行内块和浮动使用哪个？
qq_39805050的博客
06-03 1446
初学者会因为它们某种程度上可以实现相同的效果容易混淆 行内块使某个元素可以设置宽高，让多个元素位居一行，但没有脱离标准流，并且元素之间会有空隙这是因为元素之间的空格，回车键在排版时会被浏览器转为一个空白符，只需给父元素设置font-size：0； 一般这时就会想到float不是直接可以解决这个问题 因为float脱离了标准流使每个元素紧贴，但子元素设置浮动父元素就会因为没有高度导致坍塌，这时需要清除浮动给父元素添加over：hidden 消除子元素在父元素内对其他元素的影响 虽然两种方法都解决的问题，但如果
html行内块和浮动,BFC，包含块，文档流，浮动，定位是个啥关系---CSS视觉格式化模型...
weixin_29883867的博客
06-08 211
CSS视觉格式化模型浏览器在解析渲染我们所写的html内容，顺序渲染(普通文档流)。1234渲染结果如下图这儿有一个知识点：1、文档流：按我的理解就是html在浏览器渲染显示的一个模式，这个模式的特点：自上而下，从左到右(排列规则)。如果不特殊指定，浏览器会默认当前的HTML渲染是按文档流模式。2、浮动：平时我们所知的脱离文档流的一种方式，把html元素的布局更改，浮动在视图层上3、绝对定位：脱离...
在css中关于让文本以及行元素块元素居中的三种方式
jtnykx的博客
04-24 291
想要使文本垂直居中可以使用height=line-height 在父级使用text-align:center;可以使子集中的行元素行块元素文本内容水平居中 写在块元素当中 相对于父元素水平居中 margin:0 auto;
块级元素水平垂直居中方法
all_outD的博客
08-19 246
css中进行水平垂直居中的方法 首先先提一下行内元素水平垂直居中的方法 在style中设置属性 text-align:center line-height:和父元素同高 其次就是关于块级元素水平垂直居中的几种方法 1.给父元素设置相对定位，给子元素设置绝对定位，并且四个方向都设置为0px，加margin：auto 2.给父元素和子元素都设置为绝对定位，并且left:子元素width的一半 top:子元素height的一半 3.给父元素和子元素都设置为绝对定位，并且 left:calc(50%-子元素widt
元素垂直居中的五种方式
weixin_45061726的博客
12-12 7403
html 元素标签内的内容垂直居中 的五种方式
css 元素上下居中
datangde的专栏
02-06 1万+
css 中的元素加了position:absolute的时候，该元素已经脱离了文档流了，其高度和宽度已经不在
div垂直居中布局
weixin_30632089的博客
07-24 217
html： <body> <div class="outer-div"> <div class="inner-div"> ddddddd </div> </div> </body> css： 如下分不同情况的四种实现方式： 1.inner-div宽高不知,flex布局 　　 .oute...
CSS实现水平垂直居中的6种方式
热门推荐
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
利用【行内块】让图片和文字都垂直居中显示？
lt_1111的博客
08-28 756
<p class="user-meta"> <img class="user-image" src="static/image/test.jpg" /> <span class="user-info"> <span class="user-name">大圆脸</span> <span class="user-email">******@qq.com</span> </span&g.
CSS专题梳理之（块级行内级）水平垂直居中的多种方式
铭小小
03-21 1202
设置块级元素长宽水平，垂直居中 1.使用relative，absolute脱离文档流 2.使用绝对定位后，各方向初始化为0，margin为auto就可以执行。 块级元素和行内元素水平，垂直居中 1.使用flex布局都可以使用 2.使用relative,css中transform 专门的块级元素水平居中： margin：0 auto； 专门的行级元素水平，垂直居中： ...
CSS设置行内元素和块级元素的水平居中、垂直居中
zuo_er_lyf的博客
02-15 2891
什么叫行内元素（内联元素）？ 常见的span、a、lable、strong、b等html标签都是行内元素 默认情况下，行内元素均无法设置宽度、高度、上下方向margin的外边距等 一般在css中添加属性： display:inline //这时设置成了内联元素   什么叫块级元素？ 常见的div、p、li、h1、h2、h3、h4等html标签都是块级元素 一般在css中添加属性：...
元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）
谷小伟的博客
08-02 1万+
今天来介绍各种元素垂直居中，很实用哦！ 依然是先上图片哦，看好了，是不是有你需要的呢？ 行内元素垂直居中 利用display: table-cell; vertical-align: middle; 行内元素不能设置宽高，只能靠元素内容撑开， 但是父元素要有宽高的哈，这种相对比较简单； html &lt;h2&gt;1、子元素是行内元素&lt;/...
从零学前端第二讲：CSS行内块级元素布局与定位
weixin_34216107的博客
12-03 294
修真院Web工程师零基础全能课 本节课内容： CSS行内块级元素布局和定位 主讲人介绍 沁修，葡萄藤技术总监 项目经验丰富，擅长H5移动项目开发。 专注技术选型、底层开发、最佳代码实践规范总结与推广。 直播录屏版 传送门：https://v.qq.com/x/page/l0675... 1.行内块级元素布局 上一节里...
CSS实现行内块和文字居中对齐
m0_46744635的博客
08-24 3574
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS实现行内块和文字居中对齐</title> <style> ...
div浮动层,遮罩层屏幕居中(水平垂直居中)CSS代码
minton
10-06 9283
.toast{      width:100px;      height:100px;      background:transparent;      background:rgba(0,0,0,0.5);      border-radius:8px;      position: fixed;      margin:auto;left:0; right:0; top:0;

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值