如何居中<i>元素？

Question

我在span中有一个<i>元素，我正在努力使其居中

我尝试在style属性中添加margin-right和padding-right，但是没有用。

编辑： 这是整个表单组及其html

<div class="form-group">
    <label class="col-lg-4 control-label">@SharedLocalizer["ChooseCompany"]</label>

    @{
        var cmp = Model.OrganizationID; 
    }


    <div class="input-group date">



       <div style="display:flex; margin-left:6%" id="select-organization">
            <select class="form-control select-st" id="AddOrganizationID" name="company">
            @if (company != null)
            {
                <option selected value="@company.ID" >@company.Title</option>
            }
            else
            {
                if(cmp.HasValue){
                    <option value="@cmp">@Model.Organization</option>
                }else{
                    <option value="null">@SharedLocalizer["AllOrganizations"]</option>
                }  
            }

        </select>
            <span class="input-group-addon" id="person-organization-clear" style="cursor: pointer;"><i class="fa fa-times"></i></span>

       </div>
    </div>


</div></div>

Answer 1

将此 标签放入span并为css属性赋予text-align：center;跨越。

#testDropdown{
  text-align: center;
}

<span id="testDropdown"><i></i></span>

Answer 2

在input-group-addon的图标元素中使用display: inline-block中的<i>和.fa。我已经使用了代码中的类.input-group-addon { padding: 6px 12px; font-size: 14px; line-height: 1; text-align: center; } .fa { display: inline-block; } 。

(datetime, lat, lon)