当p标签里面字会自动变大的问题

HTML代码为：

<p class="bottom-u-line">我是有底线的</p>

CSS为：

        .bottom-u-line{
            font-size: @helpfulFontSize;
            color:@lineColor;
            &:before{
                content: '';
                display: inline-block;
                width: px2rem(80);
                height: px2rem(2);
                background-color: rgba(221,221,221,1);
                vertical-align: middle;
                margin-right: px2rem(20);
            }
            &:after{
                content: '';
                display: inline-block;
                width: px2rem(80);
                height: px2rem(2);
                background-color: rgba(221,221,221,1);
                vertical-align: middle;
                margin-left: px2rem(20);
            }
        }

此时若把元素的display设置为block；margin设置为0 auto希望能垂直居中时，p标签里面文字会变大。

解决办法：

        .bottom-u-line{
            font-size: @helpfulFontSize;
            color:@lineColor;
            width: 100%;
            display: inline-block;
            text-align: center;
        }

设置display为inline-block，此时则不会出现该问题。（PS：目前原因还不知道，希望能有大佬能解惑）