float center yazı veya resim ortalama problemi

Style sayfasında float: center; olarak ayar yapınca sayfada resim ortalama gerçekleşmiyordu. O durumda text-align: center; şeklinde yazarak yazımdaki resimlerin ortada durmalarını sağlıyordum. Fakat sadece salt resim için çalışıyordu. Yani resim çerçeveli ve altyazılı olunca bu ayar da işe yaramıyor, 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 ortada durabiliyordu.

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ı: Style css sayfasındaki ayarlarda ya da html sayfasındaki resmin kodlarında 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 (çerçeveli ve alt yazılı resim) web sayfasında orta yerde durabiliyor. 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ış (centered) 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, örneğin “ortala” yazabiliriz.

Ortala

Resmin altındaki yazıya dikkat ederseniz sağa bitişik, çerçeveli resim ise sayfa içinde tam ortada. Aşağıda resmin ve ayarın tümünün kodunu görüyorsunuz. Resim kodu karışmasın diye onu 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 sorunuzu konu ile ilgili sayfaya yazmaya gayret edin.

Sorunuzu/Yorumunuzu yazın:

Sorunuz cevabımla birlikte 1 veya birkaç saat içinde burada görünür olacaktır. Lütfen ara sıra kontrol edin.