css ===== text-align

最新推荐文章于 2024-07-25 16:45:46 发布

笑望灬星辰

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/hu1628299958/article/details/110357498

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

直接上代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-align</title>
    <style>
        /*  用在块级元素 或者 行内块元素中
            text-align 可选值  默认值：由浏览器决定 。
            left	    把文本排列到左边。
            right	    把文本排列到右边。
            center	    把文本排列到中间。
            justify	    实现两端对齐文本效果。
            inherit     谷歌浏览器默认值
        */
        body {
            padding: 50px
        }
    </style>
</head>

<body>
    <!--  -->
    <div style="text-align: center;">居中</div>
    <div style="text-align: left;">左对齐</div>
    <div style="text-align: right;">右对齐</div>

    <!-- 常规布局 -->
    <div style="width:200px;height:300px;border: 1px solid red">
        该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。</div>
    <!-- 两端对齐 -->
    <div style="width:200px;height:300px;text-align: justify;border: 1px solid red">
        该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。</div>

    <div style="text-align:center">
        <div>规定应该从父元素继承 text-align 属性的值。</div>
    </div>
</body>
</html>

效果
在这里插入图片描述

笑望灬星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css ===== text-align

直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>text-align</title> <style> /* 用在块级元
复制链接

扫一扫

专栏目录