Merkezi Javascript Metni

Michael Zippo

Bu CSS eğitiminde, metnin nasıl ortalanacağını ve öğelerin nasıl kilitleneceğini göreceğiz. Bir düzende öğeleri yatay ve dikey olarak ortalamak için kullanabileceğiniz birkaç ipucu vardır.

Hizalanmış metni daha büyük bir öğede ortalamak için, aşağıda gösterildiği gibi text-align: center; kullanın. :

Ben a div

Ve tüm metin, metin hizalama ile ortalanır: center

Merkezi hizalama blok öğeleri:

Blok öğelerinin ortalanması, bir HTML belgesinin etiketi kullanılarak en iyi şekilde gösterilir. Yapmanız gereken, kabın genel genişliğini kontrol etmek ve ardından marjı auto:

Ben bir div`im

Ve tüm metinler text-align: center

Görüntüyü merkeze hizalayın:

Bir görüntüyü ortalamak için, CSS seçicide toplu görüntüyü değiştirin ve ardından % veya px kullanarak görüntü öğesinin genişliği. margin öğesini auto olarak ayarlayın:

Alttaki görüntüyü ortalamak için, ekranı blok olarak değiştirin, ardından kenar boşluklarını otomatik olarak ayarlayın, px veya % kullanarak genişliği kontrol edin

Bir div`de dikey ve yatay olarak ortalayın:

dolgu:

Bir dosyanızdaki dolguyu ayarlamaktır - daha sonra paragrafı yatay olarak ortalamak için text-align: center kullanabilirsiniz: < br >

Alttaki görüntüyü ortalamak için, ekranı blok olarak değiştirin, ardından kenar boşluklarını otomatik olarak ayarlayın, px veya % kullanarak genişliği kontrol edin

satır yüksekliği:

Öğeyi merkeze hizalamak için -align: center metniyle ortaladığınız blok öğesinin yüksekliğine satır yüksekliğini de ayarlayabilirsiniz. Birden fazla satırınız varsa, üst ve alt öğede satır yüksekliğini kullanın ve alt öğeye vertical-align: orta ve display: inline-block ekleyin: < br>

dönüşüm:

Öğeleri ortalamanın başka bir yolu da konum ve dönüşüm kullanmaktır. Ebeveyni konumuna yerleştirin: göreceli, çocuk mutlak konuma. Alt öğenin %50`de üste ve sola yerleştirilmesi gerekecek, ardından div`deki metni ayarlamak için transform özelliğini kullanacağız. Bu özellik hakkında başka bir makalede daha fazla konuşacağız, bu nedenle şu anda %100 net değilse sorun değil:

flexbox:

Son olarak, flexbox kullanarak elemanları ortalayabiliriz. Display: flex öğesini ortalamak istediğiniz alt öğenin ana öğesine ayarlayın, ardından hizalama öğelerini ve bunu ortalamak için gerekli içeriği kullanın: