Question

我的HTML代码如下：

<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>

img是居中对齐的，但值22和文本从中心开始并向右延伸。我想要的是，无论长度如何，数字和文字都应该从左右边距来证明

我尝试了许多选项，例如设置margin: 0px auto，display: flex等，但我仍然无法证明内容的合理性。请忽略内联css，有意地完成，稍后将移动到外部文件。

Answer 1

不要在内部元素上使用position: absolute与margin-top对齐。删除这些行，text-align: center;将垂直对齐内容。

希望这会有所帮助：

<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>

水平证明内容，无论长度如何

1 个答案: