在不使用flex的情况下,可以使用以下方法来实现水平对齐div中的项目:
<div style="text-align:center;">
<div style="display:inline-block;">项目1</div>
<div style="display:inline-block;">项目2</div>
<div style="display:inline-block;">项目3</div>
</div>
<style>
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<div style="text-align:center;">
<div style="float:left;">项目1</div>
<div style="float:left;">项目2</div>
<div style="float:left;">项目3</div>
<div class="clearfix"></div>
</div>
<div style="position:relative; left:50%; transform:translateX(-50%);">
<div style="display:inline-block;">项目1</div>
<div style="display:inline-block;">项目2</div>
<div style="display:inline-block;">项目3</div>
</div>
这些方法可以在不使用flex的情况下实现水平对齐div中的项目。
领取专属 10元无门槛券
手把手带您无忧上云