Почему это не центрировано?Я не могу понять

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>

Синий, розовый, фиолетовый div не является центром, несмотря на то, что я вставляю тег выравнивания также в стиле (CSS).Почему?

Спасибо Андреа

Answer 1

Нет такого свойства CSS "align".Вместо этого используйте свойство margin и установите его значения 0 (для верхнего и нижнего), а также auto (для левого и правого).Это будет центрировать элемент.

.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>

Answer 2

Ваш float: right является главной проблемой, которая заставляет внешний DIV направо.Удалить это.Чтобы расположить его по центру по горизонтали, вы можете сделать его элементом блока и добавить auto для полей справа и слева.

Таким образом, вы должны применить display:block; margin: 0 auto; к обоим DIV и удалить float (на самом деле,для сохранения 5% -ной маржи значение margin для внутреннего DIV должно быть 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>

Answer 3

Вы можете добавить 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.