时间戳

首页 > 解决方案 > 希望图像和文本水平对齐并在网格中对齐

html - 希望图像和文本水平对齐并在网格中对齐

问题描述

<div>
<button style="   padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img  style=" width: 22px;
    height: 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>Click to Stage</span>
</button>
<button style="   padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img  style=" width: 22px;
    height: 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>Howzaat</span>
</button>
<button style="   padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img  style=" width: 22px;
    height: 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>Hurrey with the mission</span>
</button>
</div>
<div>
<button style="   padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img  style=" width: 22px;
    height: 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>Stage</span>
</button>
<button style="   padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img  style=" width: 22px;
    height: 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>catch me if you can</span>
</button>
<button style="   padding: 10px 16px 10px 16px;
     vertical-align: middle;  
     margin: auto;
     width: 32%;">
    <img  style=" width: 22px;
    height: 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>jungle mission</span>
</button>
</div>

以上是我正在尝试的代码。这里所有的图像位置都在移动，那里有文字。但我需要将它固定在所有按钮的一个位置并使其相同。我还需要在行和文本中对齐所有图像。

图像位置应固定，所有按钮中的文本起始位置应相同，并且应位于按钮的中间。

一些参考在这里..这里的图像是对齐的，文本也应该是对齐的

在此处输入图像描述

标签： htmlcss

解决方案

在按钮样式中，添加以下样式

display: flex;
align-items: center;

推荐阅读