sk215 sk215 - 4 months ago 9
HTML Question

horizontal justify the content , irrespective of length

My HTML code is as follows:

<div class="uci_container_four_boxes" style="border: 1px solid blue;overflow:auto; margin: 0px auto; position: relative;height: 129px; background: #E8ECF2; margin-left:25px;">
<div class="uci_inner_box1" style="text-align:center; height: 127px; width: 290.5px; border: 1px solid #b3b3b3; background: #E8ECF2; float: left; position: relative; margin-right: 15px;">
<img style="display: inline-block;margin-right: auto; margin-left: auto; margin-top:5px; width: 37px; height: 37px; position: absolute;" src="/app/uci/img/search-user.svg" class="uci_close"> <br>
<div style="text-align:center;display: inline-block;vertical-align: middle; margin-right: auto; margin-left: auto;line-height: 0.75em; position: absolute; margin-top: 35px; color: #004d99; letter-spacing: 1.02px; font-size: 67px; font-family: TimesNewRoman;">22</div> <br>
<div style="text-align:center; display: inline-block;vertical-align: middle; margin-right: auto; margin-left: auto;margin-top: 72px; line-height: 0.75em; position: absolute; color: black; letter-spacing: 1.02px; font-size: 17px; font-family: CiscoSansLight;" class="uci_users_heading">Attached Users</div>
</div>
</div>


The img is center aligned, but the value 22 and the text start from center and extend to right.
What i want is both, the number and text should be justified from left and right margin , irrespective of length

I tried a number of options like setting margin: 0px auto, display: flex , etc but I'm still unable to justify the content. Please help, very urgent project requirement> please ignore the inline css, it is purposefully done, will be moved to external file later.

Answer

Dont use position: absolute with margin-top on the inner elements to align. Delete these lines and the text-align: center; will align the content vertically.

Hope this helps:

<div class="uci_container_four_boxes" style="border: 1px solid blue;overflow:auto; margin: 0px auto; position: relative;height: 129px; background: #E8ECF2; margin-left:25px;">
    <div class="uci_inner_box1" style="text-align:center; height: 127px; width: 290.5px; border: 1px solid #b3b3b3; background: #E8ECF2; float: left; position: relative; margin-right: 15px;">
        <img style="display: inline-block;margin-right: auto; margin-left: auto; margin-top:5px; width: 37px; height: 37px;" src="/app/uci/img/search-user.svg" class="uci_close"> <br>
        <div style="text-align:center;display: inline-block;vertical-align: middle; margin-right: auto; margin-left: auto;line-height: 0.75em; color: #004d99; letter-spacing: 1.02px; font-size: 67px; font-family: TimesNewRoman;">22</div> <br>
        <div style="text-align:center; display: inline-block;vertical-align: middle; margin-right: auto; margin-left: auto; line-height: 0.75em; color: black; letter-spacing: 1.02px; font-size: 17px; font-family: CiscoSansLight;" class="uci_users_heading">Attached Users</div>
    </div>
</div>
Comments