html - 为什么这个 div 不是居中的？我不明白

Question

<div style="border-radius:50px 10px;width:60%;border: 1px solid #123467;background:linear-gradient(to top, #88D3CE 0%, #6E45e2 100%);display:inline-block;float:right">
  <div style="align:center;border-radius:10px 50px;margin-top:5%;text-align:center;width:60%;border: 1px solid #ffffff;background:linear-gradient(-225deg,#A445B2 0%, #D41872 52%, #FF0066 100%)">
    <br/>
		<h3 style="color:black">Running from</h3>
	</div>
	<br/>
</div>

尽管我也在样式 (CSS) 中插入了对齐标签，但蓝色、粉色、紫色的 div 并不居中。为什么？

谢谢安德里亚

Answer 1

您的 float: right 是迫使外部 DIV 位于右侧的主要问题。删除它。要使其水平居中，您可以将其设为 block 元素并为 margin-right 和 left 添加 auto。

所以，你应该应用 display:block; margin: 0 auto; 到两个 DIV 并删除 float(实际上，为了保持 5% margin-top，内部 DIV 的 margin 设置有为 margin: 5% auto 0;)

<div style="border-radius:50px 10px;width:60%;border: 1px solid #123467;background:linear-gradient(to top, #88D3CE 0%, #6E45e2 100%);display:block;margin: 0 auto;">
  <div style="align:center;border-radius:10px 50px;text-align:center;width:60%;border: 1px solid #ffffff;display:block;margin: 5% auto 0;background:linear-gradient(-225deg,#A445B2 0%, #D41872 52%, #FF0066 100%)">
    <br/>
    <h3 style="color:black">Running from</h3>
  </div>
  <br/>
</div>