首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >为什么不以这个div为中心?我不明白

为什么不以这个div为中心?我不明白
EN

Stack Overflow用户
提问于 2018-06-03 18:32:09
回答 3查看 34关注 0票数 0

代码语言:javascript
复制
<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标签。为什么?

谢谢安德里亚

EN

回答 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;)。

代码语言:javascript
复制
<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>

票数 1
EN

Stack Overflow用户

发布于 2018-06-03 18:39:38

您可以将margin: 5% auto;添加到您的内部DIV中:

代码语言:javascript
复制
<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分开。

票数 1
EN

Stack Overflow用户

发布于 2018-06-03 18:42:47

没有这样的CSS属性"align“。相反,请使用边距属性,并将其值设置为0(对于顶部和底部),以及自动(对于左侧和右侧)。这将使元素居中。

代码语言:javascript
复制
.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%);
}
代码语言:javascript
复制
<div class="outer">
  <div class="inner">
    <br/>
		<h3 style="color:black">Running from</h3>
	</div>
	<br/>
</div>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50665398

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档