为什么不以这个div为中心？我不明白
为什么不以这个div为中心？我不明白
提问于 2018-06-03 18:32:09
<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>
蓝色、粉色、紫色的div没有居中，尽管我在style (CSS)中插入了align标签。为什么？
谢谢安德里亚
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-03 18:45:05
你的float: right是迫使外部DIV向右移动的主要问题。把那个去掉。要使其水平居中，您可以将其设置为块元素，并为边距添加auto -右和左。
因此，您应该对这两个DIV应用display:block; margin: 0 auto;并删除float (实际上，为了保持5%的边际，内部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>
Stack Overflow用户
发布于 2018-06-03 18:39:38
您可以将margin: 5% auto;添加到您的内部DIV中：
<style>
#firstDiv
{
border-radius:50px 10px;
width:60%;
border: 1px solid #123467;
background:linear-gradient(to top, #88D3CE 0%, #6E45e2 100%);
display:inline-block;
float:right;
}
#secondDiv {
border-radius:10px 50px;
margin: 5% auto;
width:60%;
border: 1px solid #ffffff;
background:linear-gradient(-225deg,#A445B2 0%, #D41872 52%, #FF0066 100%);
text-align: center;
}
#secondDiv h3 {
color: black;
}
</style>
<div id="firstDiv" style="">
<div id="secondDiv" style="">
<h3>Running from</h3>
</div>
</div>但是，我建议将样式和html分开。
Stack Overflow用户
发布于 2018-06-03 18:42:47
没有这样的CSS属性"align“。相反，请使用边距属性，并将其值设置为0(对于顶部和底部)，以及自动(对于左侧和右侧)。这将使元素居中。
.outer {
border-radius: 50px 10px;
width: 60%;
border: 1px solid #123467;
background: linear-gradient(to top, #88D3CE 0%, #6E45e2 100%);
display: inline-block;
float: right;
}
.inner {
margin: 0 auto;
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%);
}<div class="outer">
<div class="inner">
<br/>
<h3 style="color:black">Running from</h3>
</div>
<br/>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50665398
复制相关文章
相似问题
腾讯云开发者
