css3 行内元素居中

CSS3是一种用于网页设计的样式表语言。它可以控制网页元素的显示和布局。在CSS3中，常见的元素分为两类：行内元素和块状元素。本文将介绍如何使用CSS3使行内元素居中布局。

行内元素的典型例子有：a、span、i、img等元素。在CSS3中，我们可以使用text-align属性来控制行内元素在父元素中的水平对齐方式。

    
        p {
            text-align: center;
        }
    

以上代码将使所有p元素中的行内元素居中对齐。

但是，text-align属性只能控制行内元素在水平方向上的对齐，如果想要在垂直方向上对齐行内元素，我们需要设置父元素的display属性为table或者table-cell。需要注意的是，table元素是块状元素，使用table元素作为父元素可能会影响网页的布局。

    
        .parent {
            display: table-cell;
            vertical-align: middle;
        }
    

以上代码将使class为parent的元素中的所有行内元素在水平和垂直方向上都居中对齐。

不同于块状元素，行内元素的宽度和高度都是由内容决定的。如果想要控制行内元素的大小和间距，我们可以使用padding和margin属性。

    
        .parent {
            display: table-cell;
            vertical-align: middle;
            padding: 10px;
        }
        .child {
            margin: 10px;
        }
    

以上代码将在class为parent的元素中的所有行内元素周围添加10px的内边距，并在每个行内元素之间添加10px的外边距。

总之，CSS3为我们提供了多种方法来控制行内元素的布局。我们可以根据具体的情况选择不同的方法，以达到最佳的显示效果。