html - 在跨度内对齐按钮

Question

我正在尝试对齐放置在 span 内的按钮，它在桌面浏览器中看起来不错，但在移动浏览器中按钮未居中对齐，请参见附图

我在 span 上附加了简单的 CSS

.navigatebutton
{
    display:inline-block;
    width:40px;
    height:40px;
    border-radius:50px;
    font-size:20px;
    color:#fff;
    text-align:center;
    text-decoration:none;
    cursor: pointer;
    background:rgba(0,0,0,.3);
}

html 如下所示

右导航按钮

<span style='top: calc(45% - 10px); right:2%; position:absolute;' class='navigatebutton preview-next'><button aria-hidden='true' data-icon='\e62d;' class='icon-arrow-right2' style='margin-top: 7px; background: rgba(0,0,0,0);'></button></span>

用于左侧导航按钮

<span style='position:relative;top: calc(45% - 10px); left: 2%; class='navigatebutton preview-previous'><button aria-hidden='true' data-icon='\e630;' class='icon-arrow-left2' style='margin-top: 7px; background: rgba(0,0,0,0);' ></button></span>

我为箭头使用 icommon 字体。

请帮助完美对齐箭头。

干杯。

Answer 1

这对你有用 https://jsfiddle.net/ezj1Lfbw/11/

更改 .navigatebutton{display: flex}

将 margin-top: 7px; 更改为 margin: auto