text-align可让行内元素、行内块元素在父亲盒子中居中

最新推荐文章于 2024-05-23 17:56:03 发布

Fish10_01

最新推荐文章于 2024-05-23 17:56:03 发布

阅读量2.4k

点赞数 4

文章标签： css

本文链接：https://blog.csdn.net/qq_42390357/article/details/105748705

版权

1、text-align 可控制文本在元素内部的位置；
2、text-align 可以让行内元素、行内块元素在父亲盒子中居中，
3、text-align对块元素是无效；

此处用text-align：center；做实验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text_align居中功能测试</title>
    <style>
        /*body {*/
        /*    width: 1000px;*/
        /*    height: 1000px;*/
        /*}*/
        div {
            width: 200px;
            height: 200px;
            background-color: #ff0000;
            text-align: center;
        }
        span {
            background-color: #00ff00;
        }

        input {
            background-color: #0000ff;
            outline: none;
            border: 0;
        }
        img {
            width: 50px;
        }

        div .block_text {
            background-color: rgba(222,222,222,.5);
            text-align: left;
        }
    </style>
</head>
<body>
    <div>
        <span>我居中了</span>
        <input type="text" value="我也居中了">
        <img src="./images/lTcb_ve.png" alt="">
        <div class="block_text">
            我是块元素
        </div>
    </div>
</body>
</html>

在这里插入图片描述由此实验可以得出行内块元素和行内元素都可以看成是父亲盒子中的文本，所以text-align可以使行内块元素和行内元素的盒子在父亲盒子中居中。

附：
1、div是块元素，在不设置宽高的情况下，继承父亲宽度的100%。
但是：当div的父亲不是body的时候，则div会继承父亲高度的100%
（若父亲的高度没有设置，则div的高度由其自身的内容撑开。）

2、由下图的透明图的宽高可以看出。（父亲div的宽高都设置为200px）

3、
在这里插入图片描述

Fish10_01

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
text-align可让行内元素、行内块元素在父亲盒子中居中

1、text-align 可控制文本在元素内部的位置；2、text-align 可以让行内元素、行内块元素在父亲盒子中居中；此处用text-align：center；做实验。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>te...
复制链接

扫一扫