Çalıştırılabilir HTML Dokümanları: Metni ortalama

Q: HTML'de metin nasıl ortalanır?

Metni içeren elemente text-align: center ekle, örneğin ya da h1 { text-align: center; } gibi bir CSS kuralı. O elementin içindeki her metin satırını ve satır içi içeriği ortalar.

Q: Metni dikey olarak nasıl ortalarım?

Kapsayıcıyı bir flex kutusu yap: display: flex; align-items: center; (yatay olarak da ortalamak için justify-content: center ekle). Sabit yükseklikte bir kutudaki tek satır için yüksekliğe eşit bir line-height de çalışır.

Q: etiketi hâlâ geçerli mi?

Hayır. ve align="center" özelliği artık kullanılmıyor. Tarayıcılar eski sayfalar için onları hâlâ gösterir, ama yeni kodda CSS'te text-align: center kullanılmalı.

Q: HTML'de metne nasıl girinti verilir?

CSS kullan. text-indent: 2em bir paragrafın ilk satırına girinti verir, padding-inline-start: 2em ya da margin-inline-start: 2em bütün bloğa girinti verir. Metindeki boşluklar ya da güvenilir bir girinti değildir.

HTML'de metin nasıl ortalanır

Metni tutan elementte CSS özelliği text-align: center kullan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center text</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { text-align: center; }
    .center { text-align: center; }
  </style>
</head>
<body>
  <h1>A centered heading</h1>
  <p class="center">This paragraph is centered with a class.</p>
  <p style="text-align: center">This one uses an inline style.</p>
  <p>This paragraph is not centered.</p>
</body>
</html>

text-align elementin içindeki her satırı, linkler, resimler ve butonlar gibi satır içi şeyler dahil, ortalar. Miras alınır, yani onu bir kapsayıcıya vermek içindeki her şeydeki metni ortalar.

span'e değil, bloğa yaz

text-align blok kapsayıcılarda çalışır: <p>, <div>, başlıklar, tablo hücreleri. Bir <span> ya da <a> üzerinde hiçbir şey yapmaz, çünkü satır içi bir element yalnızca metni kadar geniştir ve içinde ortalanacak yer yoktur:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align on inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; margin-bottom: 8px; padding: 4px; }
    .on-span span { text-align: center; background: #fef3c7; }
    .on-div { text-align: center; border-color: #16a34a; }
    .on-div span { background: #dcfce7; }
  </style>
</head>
<body>
  <div class="on-span"><span>text-align on the span: no effect</span></div>
  <div class="on-div"><span>text-align on the parent div: centered</span></div>
</body>
</html>

Çözüm her zaman aynıdır: text-align: center değerini üstteki bloğa taşı.

Bloğu ortala, satırları sola hizala

Birkaç satırlık bir paragrafta tamamen ortalanmış metin okunması zordur, çünkü her satır farklı bir yerden başlar. Yaygın bir kalıp, bloğu sayfada ortalamak ve metnini başa hizalı tutmaktır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Centered column</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .column { max-width: 320px; margin-inline: auto; border: 2px dashed #2563eb; padding: 8px; }
    .column h2 { text-align: center; margin-top: 0; }
  </style>
</head>
<body>
  <div class="column">
    <h2>Centered title</h2>
    <p>This column sits in the middle of the page, but its lines of text start at the same edge, which keeps longer text easy to read.</p>
  </div>
</body>
</html>

margin-inline: auto genişliği olan bir bloğu ortalar, text-align ise içindeki satırları ortalar. Kutuları ortalamak (flexbox, grid ya da margin ile) div ortalama sayfasında anlatılıyor.

Metni dikey olarak ortalamak

text-align yalnızca yatayda çalışır. Metni bir kutunun içinde dikey olarak ortalamak için kutuyu bir flex kapsayıcı yap:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vertical center</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { height: 140px; background: #e5e7eb; border-radius: 8px; margin-bottom: 12px; }
    .flex { display: flex; align-items: center; justify-content: center; text-align: center; }
    .single { height: 60px; line-height: 60px; text-align: center; background: #dbeafe; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="box flex">Centered both ways<br>with flexbox</div>
  <div class="single">One line with line-height</div>
</body>
</html>

align-items: center dikey olarak ortalar, justify-content: center yatay olarak ortalar, text-align: center ise birkaç satır olduğunda satırları birbirine göre ortalamaya devam eder. line-height yöntemi yalnızca yüksekliği bilinen bir kutudaki tek satırlık metin için çalışır.

Tüm text-align değerleri

Değer	Sonuç
`start` (varsayılan)	Satırlar baş kenardan başlar: İngilizcede sol, Arapça ve İbranicede sağ
`end`	Satırlar son kenarda biter
`center`	Satırlar ortalanır
`justify`	Satırlar iki kenara da değecek şekilde yayılır (son satır hariç)
`left`, `right`	Dil ne olursa olsun her zaman sol ya da her zaman sağ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>text-align values</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 260px; border: 2px solid #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <p style="text-align: start">start: the default for most text.</p>
  <p style="text-align: end">end: lines hug the end edge.</p>
  <p style="text-align: justify">justify: the spaces between words stretch so every full line reaches both edges of the box.</p>
  <p dir="rtl" style="text-align: start">start in a right to left paragraph</p>
</body>
</html>

left ve right yerine start ve end tercih et: son kutunun gösterdiği gibi, sağdan sola yazılan dillerde otomatik olarak yön değiştirirler.

Eski center etiketi

Eski sayfalar metni <center> ile ya da bir align özelliğiyle ortalar:

<center>Old way</center>
<p align="center">Also old</p>

İkisi de artık kullanılmıyor. Tarayıcılar eski siteler bozulmasın diye onları hâlâ gösterir, ama güncel HTML'de geçersizdirler ve yerleşimi işaretlemeye karıştırırlar. CSS'te text-align: center kullan.

Metne girinti vermek

HTML'de girinti etiketi yoktur ve yazılan boşluklar birleşir (HTML'de boşluk sayfasına bak). Girintiler CSS'in işidir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Indent</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 420px; }
    .first-line { text-indent: 2em; }
    .block { padding-inline-start: 2em; border-inline-start: 3px solid #2563eb; }
    .hanging { padding-inline-start: 2em; text-indent: -2em; }
  </style>
</head>
<body>
  <p class="first-line">text-indent moves only the first line of the paragraph, the way books start a new paragraph. The following lines start at the edge.</p>
  <p class="block">padding-inline-start indents every line of the block.</p>
  <p class="hanging">A hanging indent: the first line sticks out and the rest is indented, as in a bibliography entry.</p>
</body>
</html>

Girinti	CSS
Yalnızca ilk satır	`text-indent: 2em`
Bütün blok	`padding-inline-start: 2em` ya da `margin-inline-start: 2em`
Asılı (ilk satır dışarıda)	`padding-inline-start: 2em; text-indent: -2em`

em girintiyi yazı boyutuna bağlar, yani metinle birlikte ölçeklenir.

Sık yapılan hatalar

Satır içi bir elemente text-align vermek. Onu üstteki bloğa ver.
text-align ile bir kutunun ortalanmasını beklemek. Genişliği olan bir bloğu değil, metni ve satır içi içeriği ortalar. Kutular için margin-inline: auto ya da flexbox kullan.
<center> ya da align="center" kullanmak. Artık kullanılmıyor. CSS kullan.
Uzun paragrafları ortalamak. Başlıkları ve kısa satırları ortala; gövde metnini başa hizalı tut.
  ya da boşluklarla girinti vermek. text-indent ya da padding kullan.

Sıkça Sorulan Sorular

HTML'de metin nasıl ortalanır?

Metni içeren elemente text-align: center ekle, örneğin <p style="text-align: center"> ya da h1 { text-align: center; } gibi bir CSS kuralı. O elementin içindeki her metin satırını ve satır içi içeriği ortalar.

text-align: center span üzerinde neden çalışmıyor?

Span satır içidir, yani yalnızca metni kadar geniştir ve içinde ortalanacak yer yoktur. text-align: center değerini üstteki bloğa (onu saran <p> ya da <div>) ver ya da span'i display: block yap.

Metni dikey olarak nasıl ortalarım?

Kapsayıcıyı bir flex kutusu yap: display: flex; align-items: center; (yatay olarak da ortalamak için justify-content: center ekle). Sabit yükseklikte bir kutudaki tek satır için yüksekliğe eşit bir line-height de çalışır.

<center> etiketi hâlâ geçerli mi?

Hayır. <center> ve align="center" özelliği artık kullanılmıyor. Tarayıcılar eski sayfalar için onları hâlâ gösterir, ama yeni kodda CSS'te text-align: center kullanılmalı.

HTML'de metne nasıl girinti verilir?

CSS kullan. text-indent: 2em bir paragrafın ilk satırına girinti verir, padding-inline-start: 2em ya da margin-inline-start: 2em bütün bloğa girinti verir. Metindeki boşluklar ya da   güvenilir bir girinti değildir.

İlgili kavramlar