Eienskap place-self

Die eienskap place-self spesifiseer die belyning van 'n individuele element in 'n rooster onmiddellik volgens die horisontale en vertikale asse. In die eienskap se waarde word die belyning volgens die vertikale as eerste aangedui, die tweede - die belyning van die individuele element in die rooster volgens die horisontale as. Die eienskap word gespesifiseer in die element wat ons wil belyn.

Sintaksis

element {
	place-self: waarde vir vertikaal waarde vir horisontaal;
}

Voorbeeld . Belyning volgens die middel van die vertikale as en die begin van die horisontale asse

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	place-self: center start;
}

Voorbeeld . Belyning volgens die begin van die vertikale as en die einde van die horisontale asse

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	place-self: start end;
}

Voorbeeld . Belyning volgens die einde van die vertikale as en die middel van die horisontale asse

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	place-self: end center;
}

Kyk ook

die eienskap justify-self,
wat die belyning van 'n individuele element in 'n rooster volgens die horisontale as spesifiseer
die eienskap align-self,
wat die belyning van een blok spesifiseer