Metin içeren bir div öğem var ve bu div'in içeriğini dikey olarak ortaya hizalamak istiyorum.
İşte benim div stilim:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
Bunu yapmanın en iyi yolu nedir?
Bu temel yaklaşımı deneyebilirsiniz:
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Yalnızca tek bir metin satırı için çalışır, çünkü satırın yüksekliğini içeren kutu öğesiyle aynı yüksekliğe ayarlarız.
Bu, metni dikey olarak hizalamanın başka bir yoludur. Bu çözüm tek bir satır ve birden fazla metin satırı için işe yarar, ancak yine de sabit yükseklikte bir kap gerektirir:
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>
CSS sadece <div>
yi boyutlandırır, <div>
'in satır yüksekliğini yüksekliğine eşitleyerek <span>
ı dikey olarak ortalar ve <span>
ı vertical-align: middle
ile bir inline-block yapar. Daha sonra <span>
için satır yüksekliğini normale döndürür, böylece içeriği doğal bir şekilde blok içinde akacaktır.
Ve işte display: table
ve display: table-cell
]5 (temelde sadece Internet Explorer 7) desteklemeyen eski [tarayıcılarda] çalışmayabilecek başka bir seçenek. CSS kullanarak tablo davranışını simüle ediyoruz (tablolar dikey hizalamayı desteklediğinden) ve HTML ikinci örnekle aynı:
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
Bu teknik, üst, alt, sol ve sağı 0 olarak ayarlayan mutlak konumlandırılmış bir öğe kullanır. Smashing Magazine'deki bir makalede daha ayrıntılı olarak açıklanmıştır, Absolute Horizontal And Vertical Centering In CSS.
Aşağıdaki CSS kod parçasını ekleyerek bunu kolayca yapabilirsiniz:
display: table-cell;
vertical-align: middle;
Bu, CSS'nizin sonunda şöyle göründüğü anlamına gelir:
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}
<div id="box">
Some text
</div>
Tek bir metin satırı (veya tek bir karakter) için bu tekniği kullanabilirsiniz:
Bu #box` sabit olmayan, %** cinsinden göreli bir yüksekliğe sahip olduğunda kullanılabilir.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
JsBin]1 (CSS'yi düzenlemek daha kolay) veya [JsFiddle][2] (sonuç çerçevesinin yüksekliğini değiştirmek daha kolay) adresinde canlı bir demoya bakın.
İç metni CSS'de değil HTML'de yerleştirmek istiyorsanız, metin içeriğini ek inline öğesine sarmanız ve #box::after
öğesini eşleşecek şekilde düzenlemeniz gerekir. (Ve tabii ki content:
özelliği kaldırılmalıdır).
Örneğin, '
. Bu durumda,
#box::after,
#box span` ile değiştirilmelidir.
Internet Explorer 8 desteği için ::
yerine :
yazmalısınız.