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

Question

我得到了以下表格，其中我试图在顶行按钮旁边放置一个图标(回形针)。顶行是一组中彼此相邻对齐的两个按钮。为此使用 UIKit。

我苦苦挣扎的是对齐按钮旁边的图标。只是试图 float 它所以它不应该调整任何东西的大小。还给出了我所做的摘录，但是它是在 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 添加到您试图将其放在旁边的按钮中。