uni-app：text文本組件是行內元素，如何讓標題居中顯示？

text 組件的屬性

 注意：

• text 組件相當於行內標簽、在同一行顯示

• 除了文本節點以外的其他節點都無法長按選中

行內元素與塊級元素區別：

1.行內元素與塊級元素可以相互轉換，通過修改display屬性值來切換塊級元素和行內元素，行內元素display：inline，塊級元素display：block。

2.行內元素和其他行內元素都會在一條水平線上排列，都是在同一行的；塊級元素卻總是會在新的一行開始排列，各個塊級元素獨占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮動（float：left/right）讓其水平方向排列。

3.行內元素不可以設置寬高，寬度高度隨文本內容的變化而變化，但是可以設置行高（line-height），同時在設置外邊距margin上下無效，左右有效，內填充padding上下無效，左右有效；塊級元素可以設置寬高，並且寬度高度以及外邊距，內填充都可隨意控制。        

4.塊級元素可以包含行內元素和塊級元素，還可以容納內聯元素和其他元素；行內元素不能包含塊級元素，只能容納文本或者其他行內元素。

使用案例：

<template>
    <view class="news-detail">
        <text class="title">標題</text>
        <view class="info">
            <text>發表時間：</text>
            <text>瀏覽：</text>
        </view>
        <view class="content">
            內容
        </view>
    </view>
</template>

效果：

<style lang="scss">
    .news-detail{
        font-size: 30rpx;
        .title{
            text-align: center;
        }
        .info{
            
        }
        .content{
            
        }
    }
</style>

如何讓標題居中顯示？

發現只使用text-align：center，並不能是標題居中顯示，因為行內元素不可以設置寬高，寬度高度隨文本內容的變化而變化。由於塊級元素可以設置寬高，故可以先將text轉換成塊級元素。

<style lang="scss">
    .news-detail{
        font-size: 30rpx;
        .title{
            text-align: center;
            display: block;
        }
        .info{
            
        }
        .content{
            
        }
    }
</style>

這樣標題就會居中了，效果如下：