希望圖片和文字在網格中保持水平對齊和對齊。 -有解無憂

。

<div> 
<button style=" padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img style=" width: 22px;
    高度: 22px;
     vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />/span>
    <span>點擊進入舞臺</span>/span>
</button>/span>
<button style=" padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img style=" width: 22px;
    高度: 22px;
     vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />/span>
    <span>Howzaat</span> /span>
</button>/span>
<button style=" padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img style=" width: 22px;
    高度: 22px;
     vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />/span>
    <span>Hurrey with the mission</span> 
</button>/span>
</div>
<div>/span>
<button style=" padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img style=" width: 22px;
    高度: 22px;
     vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />/span>
    <span>Stage</span>
</button>/span>
<button style=" padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img style=" width: 22px;
    高度: 22px;
     vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />/span>
    <span>如果你能抓住我</span> 
</button>/span>
<button style=" padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img style=" width: 22px;
    高度: 22px;
     vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png" alt="Text" />/span>
    <span>叢林任務</span>/span>
</button>/span>
</div>/span>

以上是我正在嘗試的代碼。這里所有的影像位置都在這里和那里移動，與文本有關。但我需要它固定在所有按鈕的一個位置上，并使其相同。我需要所有的圖片在兩行中對齊，文本也是如此。

圖片的位置應該是固定的，文字的起始位置應該在所有的按鈕中都是一樣的，而且應該是按鈕的中間位置。

這里有一些參考。這里的影像是對齊的，文本也應該是對齊的

。

在這里輸入圖片描述

uj5u.com熱心網友回復：

在按鈕樣式中，添加以下樣式

display: flex;
align-items: center;

uj5u.com熱心網友回復：

你可以使用flex來設定你想要的網格（選擇適合你的尺寸，我把我的網格設定為700px的寬度。如果你洗掉了btn-wrapper類，它就會失去這個屬性而變成100%寬度。

你可以通過使用justify-content: center, justify-content: flex-start, justify-content: flex-end, justify-content: space-between, justify-content: space-evenly, justify-content: space-around來弄清楚你希望圖片和文字如何被放置在這個按鈕上。

全屏查看片段以獲得最佳的可視化效果！

示例作為片段：

。

：root {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;  
}

.flex {
    display: flex;
}

.row {
    flex-direction: row;
    margin-top: calc(var(--bs-gutter-y) * -1) 。
    margin-right: calc(var(--bs-gutter-x) * -.5) 。
    margin-left: calc(var(--bs-gutter-x) * -.5) 。
}

.row > * {
    flex-shrink: 0;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5) 。
    padding-left: calc(var(--bs-gutter-x) * .5) 。
    margin-top: var(--bs-gutter-y)。
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
    max-width: 25%; max-width: 25%
}

.full-width {
    flex: 0 0 100%;
    max-width: 100%;
}

.wrap {
    flex-wrap: wrap;
}

.btn {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding: .375rem .75rem;
    字體大小。1rem;
    border-radius: .25rem;
    transition: color .15sease-in-out，background-color . 15s easy-in-out,border-color .15s easy-in-out,box-shadow .15s easy-in-out。
    background-color: #6c757d;
    邊框顏色: #6c757d;
}

.btn-txt {
    color: #fff;
}

.img {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    content:url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/512px-HTML5_logo_and_wordmark.svg.png"/span>);
}

.btn-wrapper {
 width: 700px;
}

< div class="btn-wrapper flex row full-width wrap"/span>>
    <div class="flex col-3"/span>>
        <button class="btn">/span>
            < img class="img" alt="Text" />
            <span class="btn-txt"/span>> btn one的文本</span> 
        </button>/span>
    </div>
    <div class="btn-container flex col-3">
        <button class="btn">/span>
            < img class="img" alt="Text" />
            <span class="btn-txt"/span>> btn two的文本</span> 
        </button>/span>
    </div>
    <div class="btn-container flex col-3">
        <button class="btn">/span>
            < img class="img" alt="Text" />
            <span class="btn-txt"/span>> btn的文本三</span>/span>
        </button>/span>
    </div>
    <div class="btn-container flex col-3">
        <button class="btn">/span>
            < img class="img" alt="Text" />
            <span class="btn-txt"/span>> btn的文本四</span> 
        </button>/span>
    </div>
    <div class="btn-container flex col-3">
        <button class="btn">/span>
            < img class="img" alt="Text" />
            <span class="btn-txt"/span>> 文本為btn五</span> 
        </button>/span>
    </div>
    <div class="btn-container flex col-3">
        <button class="btn">/span>
            < img class="img" alt="Text" />
            <span class="btn-txt"/span>> btn的文本六</span> 
        </button>/span>
    </div>
</div>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/331825.html

標籤：

上一篇：試圖通過點擊按鈕使輸入框出現-Javascript

下一篇：如何使用Chef配方通過讀取Shell腳本來設定環境變數？