Bir div İçinde Metni (Yatay ve Dikey Olarak) Nasıl Ortalayabilirim

Bir Div Icinde Metni Yatay Ve Dikey Olarak Nasil Ortalayabilirim



Geliştiriciler, web sayfalarını tasarlarken resimler, metin, tablolar ve diğerleri dahil olmak üzere çeşitli bileşenler ekleyebilir. Ayrıca metin, birden çok CSS özelliği kullanılarak bir div'de ortaya hizalanabilir. Metni yatay olarak ortalamak için en popüler yöntem, “ Metin hizalama ' bağlanmak. Ayrıca, “ satır yüksekliği ' Ve ' dikey hizalama ” Metni dikey olarak hizalamak için nitelikler.

Bu gönderi, metni bir div içinde dikey ve yatay olarak ortalama yöntemini belirtecektir:





Bir div İçinde Metin Yatay Olarak Nasıl Ortalanır?

Metni bir div içinde yatay olarak ortalamak için verilen prosedürü inceleyin.



Adım 1: Bir div Konteyneri Yapın



Başlangıçta, “ yardımıyla bir div kabı oluşturun.

” öğesi. Ardından, bir “ İD ” özelliği div açılış etiketinin içindedir. Bundan sonra, div etiketi arasına bir miktar metin yerleştirin:



< div İD = 'içeriği hizala' >
Linuxhint en iyi web sitelerinden biridir için içerik yaratımı.
div >


Çıktı


2. Adım: Metni Ortalamak için div Kapsayıcısına erişin



Şimdi, “ yardımıyla div konteynerine erişin. İD ” seçici ile özellik adı “ # ” ve aşağıdaki CSS özelliklerini uygulayın:

#align-içerik{
Genişlik: 80 % ;
marj: 0 Oto;
dolgu: 20 piksel;
arka plan: #c8edf3;
metin hizalama: merkez;
renk: rgb ( 49 , onbeş , 240 ) ;
}


Burada:

    • “ Genişlik ” özelliği, konteynerin genişlik boyutunu ayarlamak için kullanılır.
    • “ marj ”, kabın dışında bir boşluk belirtir.
    • “ dolgu malzemesi ”, öğenin sınırının içindeki bir boşluğu tanımlar.
    • “ arka plan ”, öğenin arka tarafındaki arka plan rengini ayarlar.
    • “ Metin hizalama ” özelliği, metnin hizalamasını “ olarak ayarlamak için kullanılır. merkez ”.
    • “ renk ”, sınırın içindeki metin için bir renk belirtir.

Hizalanmış metni, oluşturulan div içinde yatay olarak başarılı bir şekilde ortaladığımız gözlemlenebilir:

Bir div İçinde Metni Dikey Olarak Ortalama Nasıl Yapılır?

Metni bir div kapsayıcısı içinde dikey olarak ortalamak için sağlanan yönergeleri izleyin.

1. Adım: div Kapsayıcısına erişin

Her şeyden önce, oluşturulan div kapsayıcısına erişin.

2. Adım: Metni Dikey Olarak Ortalamak için CSS özelliklerini uygulayın

Ardından, metni bir div'de dikey olarak ortalamak için aşağıda listelenen CSS özelliklerini uygulayın:

#align-içerik{
ekran: tablo hücresi;
genişlik: 300 piksel;
yükseklik: 150 piksel;
dolgu: 10 piksel;
renk: mavi;
arka plan rengi: rgb ( 248 , 215 , 166 ) ;
kenarlık: 3px kesikli #f09d03;
dikey hizalama: orta;
}


Yukarıdaki kod parçacığına göre:

    • Yı kur ' görüntülemek öğesinin görüntülenme davranışını şu şekilde belirtir: masa hücresi ”, bu, div öğesinde tablonun hücresi gibi davrandığı anlamına gelir.
    • “ Genişlik ” özelliği, eleman genişlik boyutunu belirtir.
    • “ yükseklik ” öğesinin yüksekliğini ayarlar.
    • “ dolgu malzemesi ”, öğenin içinde bir boşluk tanımlar.
    • “ renk ” elemanı içindeki metnin rengini ayarlamak için kullanılır.
    • “ arka plan rengi ”, öğenin arka yüzünün rengini belirtir.
    • “ sınır ” özelliği, bir öğe üzerinde bir sınır tanımlar.
    • “ dikey hizalama ” özelliği, “ öğesinde tanımlanmış bir öğenin dikey hizalamasını ayarlamak için kullanılır. orta ”.

Çıktı


Konteyner içindeki metni hem dikey hem de yatay olarak ortalamak için tüm prosedürü öğrendiniz.

Çözüm

Metni bir div içinde dikey ve yatay olarak ortalamak için, önce

öğesi yardımıyla bir div kabı oluşturun ve seçiciyi kullanarak ona erişin. Ardından, ' Metin hizalama ” özelliği yatay hizalama için kullanılır ve “ dikey hizalama ” dikey hizalamayı ayarlar. Bu gönderi, metni bir div içinde dikey ve yatay olarak ortalamak için yöntemleri gösterdi.

Diğer

Kategori

Popüler Mesajlar

İçinde Özel HTML Varlıkları Olan Bir Dizinin Kodunu Çözmenin Doğru Yolu Nedir?

Windows'ta “C:\Windows\System32\LogiLDA.dll Başlatılırken Bir Sorun Oluştu” İçin 7 Düzeltme

JQuery'de hide() ve fadeOut(), show() ve fadeIn() arasında nasıl ayrım yapılır?

Linux'ta Cppcheck Komutu

Windows'ta Farklı Yöntemler Kullanarak Bilgisayar Nasıl Kapatılır?

PC Accelerate Potansiyel Olarak İstenmeyen Uygulama Nasıl Kaldırılır?

JavaScript Kullanarak Giriş Metninden Etiket Seçme Seçeneği Nasıl Eklenir

Python Sözlükleri

Arduino Nano'yu Raspberry Pi'ye Bağlama

PowerShell'de Bildirimi Kullanma

iPhone'da Yer İmlerine Nasıl Eklenir?

Debian 12'ye Docker CE Nasıl Kurulur

toLocaleLowerCase ve toLowerCase Arasındaki Fark Nedir?

JavaScript çalışma zamanı hatası: '$' tanımsız.

Perl'de FileHandle Modülü

Windows 10'da Windows Mağazası Uygulamaları ve Edge Uzantıları Yüklenemiyor - Winhelponline

WSL aracılığıyla NVIDIA CUDA/cuDNN Hızlandırması ile Windows 10/11'e En Son TensorFlow Nasıl Kurulur

Linux'ta History Komutu Nasıl Kullanılır?

PyTorch'ta Tensöre Boyut Nasıl Eklenir?

MATLAB'de Dizeler ve Sayıların Karışımı ile fprintf Nasıl Kullanılır