How to align items inside div horizontally without using flex-CodePudding

I want to align items horizontally without using flex. In below example I want label, input and span to be aligned horizontally. Cuurently display:flex which is there is working fine but I want without using flex

<div class="input-group" style="display: flex; align-items: center;">
<label style="width: 7rem; display: inline-block;">
<span class="control-label" style="color: rgb(64, 64, 64); font-family: Arial; font-size: 50px!important ;font-size: 15px; line-height: 1.5;">Email:</span>
<span class="mandatory">*</span>
<small class="smallExplain"></small>
</label>
<input class="form-control" type="email" name="emailId" placeholder="Email" required="" style="color: rgb(100, 96, 96); font-family: Arial; margin-bottom: 0px; width: 100%; padding: 0.375rem 0.75rem; line-height: 1.5; background-color: rgb(255, 255, 255); border: 3px solid rgb(0,0,0); border-radius:0.7rem !important; border-radius: 0.25rem;">
</div>

CodePudding user response：

you can add margin-right: auto and margin-left: auto css manualy on your input, and label. For example:

style.css

label {
   margin-right: auto;
   margin-left: auto;
}

input {
   margin-right: auto;
   margin-left: auto;
}

let me know if its works.

CodePudding user response：

.input-group{ margin: "auto";}

Adding margin - auto can center the div without using flexbox.