CSS Izgarasında Merkezleme

CSS Grid ile basit bir sayfa oluşturmaya çalışıyorum.

Yapamayacağım şey, HTML'den ilgili ızgara hücrelerine metni ortalamaktır.

Ayrı içinde yerleştirme içeriği denedim divs içini ve dışını her iki left_bgve right_bgboşuna CSS özellikleri bazılarıyla seçicileri ve oynamaya.

Bunu nasıl yaparım?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

Bu cevabın iki ana bölümü vardır:

1. CSS Izgarasında hizalamanın nasıl çalıştığını anlama.
2. CSS Izgarasında merkezleme için altı yöntem.

Yalnızca çözümlerle ilgileniyorsanız, ilk bölümü atlayın.

Izgara düzeninin Yapısı ve Kapsamı

Bir ızgara kabında merkezlemenin nasıl çalıştığını tam olarak anlamak için, önce ızgara düzeninin yapısını ve kapsamını anlamak önemlidir.

Izgara kabının HTML yapısının üç düzeyi vardır:

• konteyner
• eşya
• içerik

Bu seviyelerin her biri ızgara özelliklerini uygulama açısından diğerlerinden bağımsızdır.

Kapsamı bir ızgara kabın bir üst-alt ilişkisi ile sınırlıdır.

Bu, bir ızgara konteynerinin her zaman üst öğe ve bir ızgara öğesinin her zaman alt öğe olduğu anlamına gelir. Izgara özellikleri yalnızca bu ilişki içinde çalışır.

Çocukların ötesinde bir ızgara kabının torunları ızgara düzeninin bir parçası değildir ve ızgara özelliklerini kabul etmezler. (En azından subgridızgara öğelerinin torunlarının birincil kabın satırlarına saygı duymasına izin verecek özellik uygulanana kadar değil .)

Yukarıda açıklanan yapı ve kapsam kavramlarına bir örnek.

Tic-tac-toe benzeri bir ızgara düşünün.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

Her bir hücrede X ve O'nun ortalanmasını istiyorsunuz.

Böylece merkezlemeyi kap düzeyinde uygularsınız:

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

Ancak, ızgara düzeninin yapısı ve kapsamı justify-itemsnedeniyle, konteynerde ızgara öğeleri, içeriği değil (en azından doğrudan değil) ortalar.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

Şununla aynı sorun align-items: İçerik bir yan ürün olarak ortalanmış olabilir, ancak düzen tasarımını kaybettiniz.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

İçeriği ortalamak için farklı bir yaklaşım izlemeniz gerekir. Izgara düzeninin yapısına ve kapsamına tekrar bakarak, ızgara öğesini üst öğe olarak ve içeriği alt öğe olarak ele almanız gerekir.

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>

jsFiddle demosu

CSS Izgarasında Merkezleme için Altı Yöntem

Izgara öğelerini ve içeriğini ortalamak için birden çok yöntem vardır.

İşte temel bir 2x2 ızgarası:

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

flexbox'a

Izgara öğelerinin içeriğini ortalamanın basit ve kolay bir yolu için flexbox kullanın.

Daha spesifik olarak, ızgara öğesini esnek bir kaba dönüştürün.

Bu yöntemle çakışma, teknik özellik ihlali veya başka bir sorun yoktur. Temiz ve geçerli.

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Tam bir açıklama için bu gönderiye bakın:

• Flexbox'ta Öğeleri Dikey ve Yatay Olarak Ortalama

Izgara Düzeni

Bir esnek öğenin aynı zamanda bir esnek kap olabileceği gibi, bir ızgara öğesi de bir ızgara kabı olabilir. Bu çözüm yukarıdaki flexbox çözümüne benzer, ancak merkezleme esneme özellikleri değil ızgara ile yapılır.

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

auto marjlar

margin: autoIzgara öğelerini dikey ve yatay olarak ortalamak için kullanın .

grid-item {
  margin: auto;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Izgara öğelerinin içeriğini ortalamak için öğeyi bir ızgara (veya esnek) kabına dönüştürmeniz, anonim öğeleri kendi öğelerine ( CSS tarafından doğrudan hedeflenemedikleri için ) sarmanız ve kenar boşluklarını yeni öğelere uygulamanız gerekir.

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Kutu Hizalama Özellikleri

Izgara öğelerini hizalamak için aşağıdaki özellikleri kullanmayı düşünürken, autoyukarıdaki kenar boşlukları bölümünü okuyun .

• align-items
• justify-items
• align-self
• justify-self

https://www.w3.org/TR/css-align-3/#property-index

text-align: center

İçeriği ızgara öğesinde yatay olarak ortalamak için text-alignözelliği kullanabilirsiniz .

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Dikey merkezleme için vertical-align: middleçalışmaz.

Bunun nedeni, vertical-alignözelliğin yalnızca satır içi ve tablo hücresi kaplarına uygulanmasıdır.

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

display: inline-gridSatır içi düzeyde bir kap oluşturduğunu ve bunun doğru olacağını söyleyebiliriz . Öyleyse neden vertical-alignızgara öğelerinde çalışmıyor ?

Bunun nedeni, ızgara biçimlendirme bağlamında öğelere blok düzeyi öğeler olarak davranılmasıdır.

6.1. Izgara Öğesi Ekranı

displayBir ızgara ürünün değer blockified : belirtilirse displaybir ızgara kabın üretilmesi, bir öğenin içinde akış çocuğun bir satır içi seviyesi değeri, bu da blok düzeyi eşdeğer hesaplar.

Bir de blok biçimlendirme bağlamda , bir şey vertical-alignözelliği orijinal olarak dizayn edilmiş, tarayıcı satıriçi seviyeden kapta blok düzeyinde eleman bulmak için beklemiyor. Bu geçersiz HTML.

CSS Konumlandırma

Son olarak, Grid'de de çalışan genel bir CSS merkezleme çözümü var: mutlak konumlandırma

Bu, belge akışından çıkarılması gereken nesneleri ortalamak için iyi bir yöntemdir. Örneğin, aşağıdakileri yapmak istiyorsanız:

• Metni bir görüntünün üzerinde ortalayın veya
• Yıldız işaretlerini (*) gerekli form alanlarının üzerine yerleştirin

Sadece position: absoluteortalanacak öğeye position: relativeve içeren blok olarak görev yapacak ataya (genellikle üst öğedir ) ayarlayın. Bunun gibi bir şey:

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

İşte bu yöntemin nasıl çalıştığına dair tam bir açıklama:

• Özellikle ekranı yeniden boyutlandırırken öğe ortada kalmayacak

Grid spesifikasyonunda mutlak konumlandırma ile ilgili bölüm:

• https://www.w3.org/TR/css3-grid-layout/#abspos

Metninizi ortalamak için flexbox kullanabilirsiniz. Bu arada, metin anonim esnek öğe olarak kabul edildiğinden ekstra kaplara gerek yoktur.

Gönderen FlexBox özellikleri :

Esnek bir kabın her akış içi çocuğu bir esnek öğe haline gelir ve doğrudan bir esnek kabın içinde bulunan her bitişik metin akışı, anonim bir esnek öğeye sarılır . Ancak, yalnızca beyaz boşluk içeren anonim bir esnek öğe (örneğin, white-spaceözellikten etkilenebilecek karakterler ) oluşturulmaz (sanki öyleymiş gibi display:none).

Bu nedenle ızgara öğelerini esnek kaplar ( display: flex) yapın ve hem dikey hem de yatay olarak ortalayın align-items: centerve justify-content: centerortalayın.

Ayrıca HTML ve CSS optimizasyonu gerçekleştirildi:

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}

<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>

Flex kullanmaya bile çalışmayın; css ızgara ile kalın !! :)

https://jsfiddle.net/ctt3bqr0/

justify-self: center;
align-self: center;

burada merkezleme işi yapıyor.

divIzgara hücresinin içinde bulunan bir şeyi ortalamak istiyorsanız, iç içe ızgarayı çalıştırabilmeniz için tanımlamanız gerekir. (Lütfen burada gösterilen her iki örneğe de bakın.)

https://css-tricks.com/snippets/css/complete-guide-grid/

Şerefe!

CSS yer öğeleri kısayol özelliği, sırasıyla hizalama öğeleri ve bloklama öğeleri özelliklerini ayarlar. İkinci değer ayarlanmazsa, ilk değer de bunun için kullanılır.

.parent {
  display: grid;
  place-items: center;
}

Flex kullanmayı deneyin:

Plunker demosu: https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

HTML

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Bunu istiyorsun?

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Bu sorunun birkaç yaşında olduğunu biliyorum, ama kimsenin önermediğini görünce şaşırdım:

   text-align: center;

bu, haklı içerikten daha evrensel bir özelliktir ve kesinlikle ızgaraya özgü değildir, ancak bu sorunun özellikle sorduğu metinle uğraşırken, metni alanı etkilemeden merkeze hizaladığını görüyorum. ızgara öğeleri arasında veya dikey merkezleme arasında. Metni, dikey ekseni üzerinde bulunduğu yerde yatay olarak ortalar. Ayrıca, yaslama içeriği ve hizalama öğeleri ekleyen bir karmaşıklık katmanını kaldırmak için buldum. justify-content ve align-items tüm ızgara öğesini veya öğelerini etkiler, metin hizalama metni içerdiği kapsayıcıyı etkilemeden ortalar. Umarım bu yardımcı olur.