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

Niebieski, różowy, Violet Div nie jest centrum pomimo wkładania tagu wyrównania również w stylu (CSS). Dlaczego?

Dzięki Andrea.

0
Andrea P. 3 czerwiec 2018, 13:32

3 odpowiedzi

Najlepsza odpowiedź

Twoja float: right jest głównym problemem, który zmusza zewnętrzną div na prawą stronę. Usuń to. Na poziomie, możesz zrobić go elementem bloku i dodać auto dla marginesu w prawo i w lewo.

Więc należy zastosować display:block; margin: 0 auto; do obu divs i usunąć float (faktycznie, aby utrzymać 5% marginesu, ustawienie {x2}} dla wewnętrznego div musi być {{x3 }})

<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
Johannes 3 czerwiec 2018, 10:59

Nie ma takiej właściwości CSS "Wyrównaj". Zamiast tego użyj właściwości marginesu i ustaw swoje wartości na 0 (do góry i dołu), a także auto (dla lewej i prawej). Spowoduje to wyśrodkować element.

.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>
1
marvhock 3 czerwiec 2018, 10:42

Możesz dodać margin: 5% auto; do twojego wewnętrznego 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>

Jednak sugeruję style oddzielające i HTML.

1
MehdiB 3 czerwiec 2018, 11:39