html/css笔记 table表格文本垂直水平居中对齐方法

最新推荐文章于 2025-03-21 23:16:13 发布

二的10次方

最新推荐文章于 2025-03-21 23:16:13 发布

阅读量1.3w

点赞数 2

分类专栏： html/css 笔记文章标签： css3 前端 css html webview

本文链接：https://blog.csdn.net/weixin_44863237/article/details/125094847

版权

html/css 笔记专栏收录该内容

4 篇文章

订阅专栏

简介：平时工作中开发经常会遇到html网页样式设计，这里记录一下笔记方便后期查看，也顺便给其他人提供一个参考

HTML 文本垂直水平居中对齐方法（一）：css样式

水平居中

text-align 应用于块级元素的文本水平居中

text-align=left; 左对齐

text-align=right; 右对齐

text-align=justify; 两端对齐

text-align=center; 水平居中

将块级元素中的内联元素设置为水平居中，并不能使块级元素水平居中

垂直居中

vertical-align应用于行内元素和替换元素，如图像和表单输入元素。

vertical-align不影响块级元素中的内容对齐。但可用于使表单元格中的元素垂直对齐。

vertical-align= middle；垂直居中

    <table>
        <tr>
            <td style="border:1px solid black;vertical-align: middle;text-align: center;">
                水平垂直居中
            </td>
        </tr>
    </table>

效果图：

让图片居中也可以使用同样的方法

HTML 文本垂直水平居中对齐方法（二）：使用flex流布局

justify-content决定元素在主轴上的排布方式，align-items决定元素在交叉轴上的排布方式。

因此：当flex的横向排布时(flex-direction:row)，此时主轴方向为水平方向，交叉轴方向为垂直方向，这时justify-content决定元素在水平方向的排布方式，align-items决定元素在垂直方向的排布方式。

当flex的纵向排布时(flex-direction:column)，此时主轴方向为垂直方向，交叉轴方向为水平方向，这时align-items决定元素在水平方向的排布方式，justify-content决定元素在垂直方向的排布方式。

    <style>
        div{
                display:flex;
                justify-content:center;
                align-items:center;
            }
    </style>

<body>
    <table>
        <tr>
            <td style="border:1px solid black;">
                <div>
                    水平垂直居中二
                </div>
            </td>
        </tr>
    </table>
</body>

效果图：

单行文本使用行高实现垂直居中（三）

div{
    text-align:center;//水平居中
    width:500px;
    height:500px;
}
p{
    margin:0;//去除段落元素自带的margin
    line-height:500px;
}