How to center <i> element?

Asked by At

I have an <i> element inside span and I'm struggling to center it

The X icon is an <code><i></code> element

I tried adding margin-right and padding-right inside style attribute but did not work.

edit: This is the whole form group with its 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>

2 Answers

0
Muhammad bux Odho On

Put this Tag in span and give css property text-align: center; to span.

#testDropdown{
  text-align: center;
}
<span id="testDropdown"><i></i></span>

0
OM PRAKASH On

Use text-align: center in input-group-addon and display: inline-block in the icon element which is your <i>. I have used the class .fa which is there in your code.

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
}

.fa {
    display: inline-block;
}