在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ span居中的問題

span居中的問題

.panel-body span{
    display: block;
    letter-spacing:1px;
    margin: 2px 0;
    width:fit-content;
}
 .innerPanel{
    float: left;
    width: 25%;
    word-wrap: break-word;
    height: 150px;
}
.panelBody{
    padding: 0px;
}
.panel-heading{
    text-align: center;
}
.panel{
    margin-bottom: 0;
}
      
<div class="panel panelWrap panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body panelBody">
        <div class="panel innerPanel panel-info" >
            <div class="panel-heading">
                <h3 class="panel-title">面板標題</h3>
            </div>
            <div class="panel-body">
                <span>這是一個基本的面板</span>
            </div>
        </div>
        <div class="panel innerPanel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板標題</h3>
            </div>
            <div class="panel-body">
                <span>這是一個基本的面板</span>
                <span>這是一個基本的面板</span>
                <span>這是一個基本的面板</span>
            </div>
        </div>
        <div class="panel innerPanel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板標題</h3>
            </div>
            <div class="panel-body">
                <span>這是一個基本的面板</span>
            </div>
        </div>
        <div class="panel innerPanel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板標題</h3>
            </div>
            <div class="panel-body">
                <span>這是一個基本的面板</span>
            </div>
        </div>
    </div>

    <div class="panel-heading">
        <h3 class="panel-title">面板標題</h3>
    </div>
    <div class="panel-body panelBody">
        <div class="panel innerPanel panel-info" >
            <div class="panel-heading">
                <h3 class="panel-title">面板標題</h3>
            </div>
            <div class="panel-body">
                <span>這是一個基本的面板</span>
            </div>
        </div>
        <div class="panel innerPanel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板標題</h3>
            </div>
            <div class="panel-body">
                <span>這是一個基本的面板</span>
                <span>這是一個基本的面板</span>
                <span>這是一個基本的面板</span>
            </div>
        </div>
        <div class="panel innerPanel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板標題</h3>
            </div>
            <div class="panel-body">
                <span>這是一個基本的面板</span>
            </div>
        </div>
        <div class="panel innerPanel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">面板標題</h3>
            </div>
            <div class="panel-body">
                <span>這是一個基本的面板</span>
            </div>
        </div>
    </div>
</div>

text-align:center 無效
想知道精準居中的辦法

回答
編輯回答
大濕胸

如果是塊元素的水平居中只需要使用margin: 0 auto;

2017年3月19日 20:11
編輯回答
女流氓
.panel-heading{
    display: flex;
    align-items: center;
    justify-content: center;
}

垂直水平居中

2018年3月14日 23:06