css 块元素 行内元素居中显示

CSS 中，块元素（block）和行内元素（inline）的表现方式是不同的。其中，块元素以块状形态展现，并且会独占一行；行内元素则以行内形态展现，但是可以与其他行内元素并排显示。

在实际的页面布局中，我们有时需要将块元素或行内元素居中显示，这时需要使用 CSS 居中的相关实现方法。下面我们分别介绍两种元素的居中实现方式。

块元素居中显示

块元素的居中方式有多种，其中比较常用的是 text-align 和 margin 属性。

1. 使用 text-align 属性将块元素内部的文本内容居中。

div style="text-align: center;
    ">
        p>
    Hello World!/p>
    /div>
    

2. 使用 margin 属性将块元素水平和垂直方向都居中。

div style="width: 200px;
     height: 200px;
     background-color: #eee;
     display: flex;
     justify-content: center;
     align-items: center;
    ">
        p>
    Hello World!/p>
    /div>
    

行内元素居中显示

我们可以使用 text-align 和 display 两个属性来实现行内元素的居中。

1. 使用 text-align 属性将行内元素的父元素中的行内元素居中。

div style="text-align: center;
    ">
        span>
    Hello World!/span>
    /div>
    

2. 使用 display 属性将行内元素转换为块元素，再使用 margin 属性居中显示。

div style="background-color: #eee;
     text-align: center;
    ">
        span style="display: block;
     margin: 0 auto;
    ">
    Hello World!/span>
    /div>
    

上述块元素和行内元素的实现方式都是比较简单且常用的，但也并非一定适用于所有情况。我们需要根据具体布局需求和元素属性进行选择。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！