对齐输入框旁边的图标/图像

Question

我有以下表格，我试图在按钮顶行旁边有一个图标（回形针）。顶行是一组中彼此相邻的两个按钮。使用UIKit。

我正在努力的是对齐按钮旁边的图标。只是试图漂浮它所以它不应该调整任何东西。我所做的事情的摘录也是在React渲染中完成的，所以不是纯粹的HTML。

        <div className="uk-margin-large-top">
            <form id={"form_element_"} className="uk-form uk-width-4-5 uk-align-center">
                <fieldset>
                    <div className="uk-form-row textbox-margin">
                        <label htmlFor={"label_"} className={r.requiredClass}>{this.props.fieldLabel}</label>
                        <div className={"uk-form-controls uk-button-group uk-display-block"} data-uk-button-radio>
                            {buttons}
                        </div>
                    </div>
                </fieldset>
            </form>
            <i className="uk-icon-small uk-icon-paperclip"></i>
        </div>

scss如下，

.uk-margin-large-top {
    margin-top: 50px !important;
}

.uk-align-center {
    margin-left: auto;
    margin-right: auto;
}
[class*="uk-align-"] {
    display: block;
    margin-bottom: 15px;
}

.uk-width-4-5, .uk-width-8-10 {
    width: 80%;
}
[class*="uk-width"] {
    box-sizing: border-box;
    width: 100%;
}

.uk-display-block {
    display: block !important;
}

.uk-button-group {
    font-size: 0;
}

.uk-icon-small {
    font-size: 150%;
    vertical-align: -10%;
}

将此图标垂直居中于css3顶部两个按钮右侧的最佳方法是什么？

Answer 1

我还没有（还）了解你的HTML，但你可以尝试CSS定位或伪元素：before和：after。

可能会将类uk-icon-small uk-icon-paperclip添加到您尝试将其放在旁边的按钮上。