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>
                    <option value="@cmp">@Model.Organization</option>
                    <option value="null">@SharedLocalizer["AllOrganizations"]</option>

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



2 Answers

Muhammad bux Odho On

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

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


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;