Html Sayfalarında Text Hizalama Işlemleri Nasıl Yapılır ?

1165

Komple Uygulamalı Web Geliştirme Eğitimi

Css Text Hizalama

Html sayfalarında text hizalama işlemleri nasıl yapılır ? Css text-align nedir ve nasıl kullanılır ?

Html sayfalarımızda yazıları hizalamak için text-align özelliğini kullanırız.

p#first{ text-align:left; } p#second{ text-align:center; } p#third{ text-align:right; } p#fourth{ text-align:justify; }

Örneğimizde 3 <p> etiketi için farklı text-align özellikleri kullandık.

text-align:left; => sola hizalanır.

text-align:center; => ortaya hizalanır. text-align:right; => sağa hizalanır.

text-align:justify; => sağa ve sola hizalanır.

Örnek 1 için tıklayınız.

Html' de Inline etiketler nasıl hizalanır ?

** hizalama işlemi block etiketlere uygulanır. Eğer inline bir etiketleri için text-align özelliği işlevsel değildir. Eğer ki inline etiket grubunu hizalamak istersek bu durumda inline etiket grubunu bir block etiketi içine alıp hizalama işlemini yapabiliriz.

<div> <a href="#"> Link 1 </a> <a href="#"> Link 2 </a> <a href="#"> Link 3 </a> </div> div { text-align:right; }

** inline etiketlere direk hizalama özelliği ekleyememizin sebebi; inline etiketler satırda içerik kadar yer kaplarlar hizalama işlemi için tüm satırı kaplamaları gerekir.

Örnek 2 için tıklayınız.

Kurs Sayfasına Git

Web Geliştirme

1. Bir Web Geliştiricinin Yol Haritası
2. Kursa Nasıl Çalışmalıyım
3. Temel Kavramlar
4. Frontend, Backend ve Full-Stack Web Geliştirici
5. Geliştirme Araçları

Html

1. İlk Html Sayfamız
2. Html Yapısı
3. Html Yapısına Uygun Web Sayfası
4. Uygulama Çalışması 1
5. Html Başlık Etiketleri
6. Html Paragraf Etiketi
7. Html Biçimlendirme Etiketleri
8. Uygulama Çalışması-2
9. Html Sırasız Listeler
10. Html Sıralı Listeler
11. Uygulama Çalışması-3
12. Html Resim Ekleme
13. Html Form Etiketleri
14. Uygulama Çalışması-4
15. Html Tablolar
16. Html Linkler
17. Html Div ve Span Etiketi
18. Html Semantik Etiketler
19. Html iFrame

Css

1. Css Nedir?
2. Css Söz Dizimi
3. Css Yazım Türleri
4. IDs & Classes
5. Css Selectors
6. Css Div
7. Css Renkler
8. Css Floating
9. Css Display
10. Css Positioning
11. Css Box Model
12. Css Margin
13. Css Padding
14. Css Borders
15. Css Box Sizing
16. Css Font Kullanımı
17. Css Icon Kullanımı
18. Css Text Biçimlendirme
19. Css Text Hizalama
20. Css Link Biçimlendirmesi
21. Css Liste Biçimlendirmesi

Bootstrap

1. Bootstrap Nedir?
2. Bootstrap Kurulumu
3. Bootstrap Grids
4. Bootstrap Typography
5. Bootstrap Text Align & Display
6. Bootstrap Floats & Positions
7. Bootstrap Colors
8. Bootstrap Tablolar
9. Bootstrap Resimler
10. Boostrap Jumbotron
11. Bootstrap Alerts
12. Bootstrap Buttons
13. Bootstrap Button Groups
14. Bootstrap Badges
15. Boostrap Progress Bars
16. Boostrap Pagination
17. Bootstrap List Group
18. Bootstrap Card
19. Bootstrap Dropdowns
20. Bootstrap Collapse
21. Bootstrap Navs
22. Bootstrap Navbar
23. Bootstrap Forms

Javascript

.Net Core

Paylaş