float center yazı veya resim ortalama problemi

Style sayfasında float: center; olarak ayar yapınca işe yaramadığı için text-align: center; şeklinde yazarak yazımdaki resimlerin ortalanmasını sağlıyordum. Fakat..

Bu ise salt resim için çalışıyordu. Yani resmin altına renkli yazı ekleyince ve bu yazı için color, font-size gibi değerler kodları belirleyince çalışmıyordu. Resimli kısım sayfada ortalanmıyordu. Sola bitişik oluyordu.

Çözüm olarak yazıların HTML sayfasında resim kodunun ve onun yanına sonradan eklediğim kodların, bunların tümünün en başına <div align="center"> ve en sonuna</div> koyunca resim renkli yazılarıyla sayfada ortalanabiliyordu.

Style css sayfasında float:center; diye bir değer geçersiz ise veya işe yaramıyorsa, nasıl bir ayar yazabiliriz?
Esas çözüm
Ve işte işin püf noktası: Margin olarak margin: 0 auto; yapacaksınız. Aynı yer için iki defa margin tanımlaması olmaz. Zaten vardı ise onun yerine bunu yazın.
İşte böyle yapınca oluyor. O kısım yazı sayfasında ortalanıyor. Demek ki işin sırrı margin sağ ve sol ölçülerine “auto” değeri vermekte.
Margin için verilen değerde burada 0 (sıfır) üst ve alt kısım içindir. Onun yerine 10px veya herhangi bir değer verebilirsiniz. Unutmayın: 0 (sıfır) için px gerekmiyor ama başka değerler için rakamla bitişik olarak px eklemek zorundasınız. 10px veya 2px gibi.

Eğer alt ve üst farklı değerler atayacaksanız:
margin:10px auto 5px auto; bu ayar ile üst boşluk için 10, alt boşluk için 5 verdik. Sağ ve sol için auto dedik ki bu kısım sayfada ortalanmış (center) olsun.

Ayrı altyazılı resim ortalama için div ile html ayarları üzerinde örnek uygulama

Önce aşağıda resmi görelim. Altına herhangi bir şey yazılabilir.

div ile ortalaOrtala

Resmin altındaki yazıya dikkat ederseniz sağa bitişik, resim ise ortalanmış. Aşağıda resmin ve ayarın tümünün kodunu görüyorsunuz. Resim kodu karışmasın diye kırmızı göstermeyi düşündüm.

<div style="border: 1px solid #dddddd; margin: 0pt auto; padding: 5px; background: #f8f8f8 none repeat scroll 0% 0%; width: 146px; text-align: right;"><img src="http://alivesitesi.googlepages.com/horoz.jpg" alt="div ile ortalama örnek" width="146" height="156" />Ortala</div>

Div ayarlarında genişliği belirtmeyi ihmal etmeyin. Ben aslında kodu bu kadar uzun yazmıyorum. WordPress otomatikman değiştirip 0 yerine 0pt yazıyor ve arkaplan rengi ayarı sadece background:#f8f8f8; iken şu hale getiriyor: background: #f8f8f8 none repeat scroll 0% 0%;
Bu ayar ise daha doğru olup hem WordPress için hem Blogger için geçerli bir HTML ayarıdır.
Resim altı yazısına gelince:
Ben text-align:right; diye yazdığım için sağa bitişik oldu. eğer right yerine center yazsanız o da ortalanmış olur. Böyle gösterdim ki bilmeyenler işe yarar bir şey daha öğrensin.

Yazar: Erdal Yüksel

Kategori: Yaşam

Etiketler:



Sorunuzu / Yorumunuzu Aşağıya Yazabilirsiniz.
Lütfen yazı dili kurallarına saygılı olalım.


(Yazamıyorsanız Mozilladan deği Google Chrome ile giriş yapın.)