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

您可以将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。

Answer 2

没有这样的CSS属性＆＃34;对齐＆＃34;。相反，使用margin属性并将其值设置为0（顶部和底部），以及auto（左侧和右侧）。这将使元素居中。

＆＃13;

.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%);
}

＆＃13;

<div class="outer">
  <div class="inner">
    <br/>
		<h3 style="color:black">Running from</h3>
	</div>
	<br/>
</div>

＆＃13;

Answer 3

你的float: right是迫使外部DIV向右侧的主要问题。删除它。要将其水平居中，您可以将其设为块元素，并为边距左右添加auto。

因此，您应该将display:block; margin: 0 auto;应用于两个DIV并移除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>

为什么不是这个div居中？我无法理解

3 个答案: