在font-awesome圖標下方添加文本

Question

我有一個正在測試的超棒的微調器。 我想在其上方或下方放置一行文本，理想情況下是一行（但仍與引導程序集成）。 下面的代碼將文本顯示在微調器下方，但該文本不是一行。 設置spinner-text{width}屬性可以將其放在一行上，但是當窗口大小更改時，它不位於圖標的中心，也不使用引導程序調整其大小。

我的HTML：

<div class="center-parent" id="spinner">
    <div class="center-container">
        <i class="fa fa-cog fa-spin"></i>
        <span class="spinner-text">Please wait while we gather data from wherever...</span>
    </div>
</div>

我的CSS：

.center-parent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.center-container {
    width: 0 auto;
    height: 0 auto;
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: -30px;
    z-index: -1;
}

.spinner-text {
    margin: 0 auto;
    display: table;
    width: 100%;
    height: 0 auto;
    font-size: 20px;
    position: absolute;
    text-align: center;
}

我使用以下JavaScript測試微調器：

<script type="text/javascript">
    var spinnerVisible = false;
    $(document).ready(function () { showSpinner() });
    function showSpinner() {
        if (!spinnerVisible) {
            $("div#spinner").fadeIn("fast");
            spinnerVisible = true;
        }
        setTimeout(hideSpinner, 4000);
    };

    function hideSpinner() {
        if (spinnerVisible) {
            var spinner = $("div#spinner");
            spinner.stop();
            spinner.fadeOut("fast");
            spinnerVisible = false;
        }
    };
</script>

我調查了以下內容，但未找到解決方法：

下方帶有標簽的真棒字體圖標按鈕

在字體真棒圖標上方居中顯示文字？

垂直和水平居中FontAwesome圖標

字體真棒圖標下方的居中文本

Answer 1

您在示例中使其變得過於復雜。 可以使用更簡單的標記和CSS flexbox完成此操作，我建議使用固定位置而不是絕對位置，因此它始終可以覆蓋整個視口。

 var spinnerVisible = false; $(document).ready(function() { showSpinner() }); function showSpinner() { if (!spinnerVisible) { $("div#spinner").fadeIn("fast"); spinnerVisible = true; } setTimeout(hideSpinner, 4000); }; function hideSpinner() { if (spinnerVisible) { var spinner = $("div#spinner"); spinner.stop(); spinner.fadeOut("fast"); spinnerVisible = false; } }; 

 .spinner-container { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .spinner-container .fa { font-size: 30px; } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="spinner-container" id="spinner"> <i class="fa fa-cog fa-spin"></i> <span class="spinner-text">Please wait while we gather data from ...</span> </div>