Question

我正在为网格进行分页控制，并使用字体真棒图标作为上一个，下一个按钮。

问题是图标（以及该元素中的任何文本）比未定义字体图标类的文本高1或2个像素。其他字体库，例如https://icomoon.io似乎具有相同的行为。

在下面的图像中，您可以看到图像及其文本与页码在垂直方向上的排列方式不一致。在元素或伪元素上设置垂直对齐样式似乎无济于事，因为任何垂直对齐设置都无法完美对齐。

Answer 1

我遇到了同样的问题，并在另一个post上找到了解决方案，并将其添加到我的CSS中，为我解决了该问题。
不要忘记放置良好的关联图标（我的图标是content）和良好的.fa-lock:before { content: "\f023"; /*This is what the creator of font-awesome put in to show the lines character */ display:block; margin-top:-1px; }值

.ImageInput-image-22 {
    max-width: 96px;
    max-height: 96px;
}

<div class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-wrap-xs-nowrap MuiGrid-grid-xs-12">
    <div class="MuiGrid-root QuestaoEscolhaResposta-imageField-14 MuiGrid-item MuiGrid-grid-sm-2">
        <div class="MuiFormControl-root MuiFormControl-fullWidth">
            <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined" data-shrink="true" for="image-select-input"></label>
            <div class="ImageInput-root-16" style="border-style: solid;border-width: 1px;border-color: blue;">
                <input id="image-select-input" type="file" hidden="">
                <button class="MuiButtonBase-root MuiIconButton-root ImageInput-button-23 MuiIconButton-colorPrimary MuiIconButton-sizeSmall" tabindex="0" type="button">
                    <span class="MuiIconButton-label">
                        <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2h-3zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8h-3zM5 19l3-4 2 3 3-4 4 5H5z"></path></svg>
                    </span>
                    <span class="MuiTouchRipple-root"></span>
                </button>
                <img alt="Imagem selecionada" class="ImageInput-image-22" style="border-style: solid;border-width: 1px;" src="http://via.placeholder.com/300x100">
            </div>
            <p class="MuiFormHelperText-root MuiFormHelperText-contained"></p>
        </div>
    </div>
    <div class="MuiGrid-root QuestaoEscolhaResposta-textField-15 MuiGrid-item MuiGrid-grid-xs-true" style="border-style: solid;border-width: 1px;border-color: red;">
        <div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
            <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense">
                <input aria-invalid="false" name="descricao" placeholder="Resposta" required="" type="text" class="MuiInputBase-input MuiInput-input MuiInputBase-inputMarginDense MuiInput-inputMarginDense" value="">
            </div>
        </div>
    </div>
    <div class="MuiGrid-root MuiGrid-item">
        <button class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary" tabindex="0" type="button" id="excluir-resposta">
            <span class="MuiIconButton-label">
                <svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg>
            </span>
            <span class="MuiTouchRipple-root"></span>
        </button>
    </div>
</div>

字体图标1或2像素太高

1 个答案: