HTML/CSS'de bir şeyi ortalamak

Sanırım bir sorunum olabilir, bir sorun olup olmadığından emin değilim, çünkü sooooo'ya uzun zamandır baktığımdan, ortalanmış olup olmadığını bile bilmiyorum.

http://jamessuske.com/thornwood/gallery.php

Yapmaya çalıştığım şey tüm galeriyi merkezlemek, bana biraz sağa benziyor. Bunu anlamaya yardım edebilecek biri varsa, bu harika olur. Şimdiden teşekkürler.

CSS KODU

.contentTextGallery{
padding:20px 0 0 0;
width:866px;
font-size:16px;
float:left;
}

.gallery{
 width:912px;
 margin-top:6px;
}

.gallery ul{
 list-style-type:none;
 text-align:center;
}

.gallery li{
 display: inline-block;
}

* html .gallery li { /* IE6 */
  display: inline;
}

*:first-child + html .gallery li { /* IE7 */
  display: inline;
}

.gallery ul a {
 display:block;
 text-decoration: none;
 color:#FFF;
 padding:5px 0 0 5px;
}
0
Hangi tarayıcı size sorun veriyor? Kromda iyi görünüyor
katma yazar Madara Uchiha, kaynak
Whoops - ne dediğini anlamadım. Ortadaki büyük kutuyu kastettiğini sandım, bu kutudaki edebi imgeler galerisi değil. @fixlr haklı - Listedeki dolguları kaldırmanız gerekiyor. Netleştirmeliydin.
katma yazar Nightfirecat, kaynak
hayır :) merkez
katma yazar Joseph Marikle, kaynak

4 cevap

Sadece .gallery öğenizdeki öğenin soldaki dolgularını kaldırmanız gerektiği gibi görünüyor:

.gallery ul { padding-left: 0px; }

Hangi web tarayıcısını kullandığınıza bağlı olarak, genellikle listelerde varsayılan bir dolgu vardır.

3
katma

Update: Oh, I see what you are trying to fix now, the stuff inside the container:

Tum ihtiyacin olan sey

.gallery ul {
  padding: 0;
}

Original:

Yapmak isteyebileceğiniz bir şey, XScope gibi bir araç seçmektir: http://iconfactory.com/software/xscope . Tasarım için araçlar (cetveller, kılavuzlar, tarayıcı boyut çerçeveleri, vb.) Olan bir uygulamadır. Cetvel bu konuda size yardımcı olabilir çünkü ekranınızdaki pikselleri ölçer. Yerleşiminizin her bir tarafında kaç piksel olduğunu hızlıca ölçebilirsiniz.

Also here is something similar but a little less elegant: http://www.arulerforwindows.com/

1
katma
değil . Yine de iyi bir güncelleme.
katma yazar Bojangles, kaynak
Bu yüzden benim yorumumdaki ikinci cümle. Zaten ekran görüntüsünü aldım, bu yüzden zaten onu göndermeye karar verdim :-P
katma yazar Bojangles, kaynak
Yaptım. Herkesin en düşük temsilcisi var ve doğru cevabı yayınladı. Bu araçları önerdiğiniz için +1 size.
katma yazar Bojangles, kaynak
Sadece sitenin içeriği yerine sitenin içeriği hakkında konuştuğunu fark etti. Bu hatayı düzeltmek için basit bir çözümle güncellendi.
katma yazar nheinrich, kaynak
:) Oy verdikten sonra, ne olduğunu anladı.
katma yazar nheinrich, kaynak

Ortalanmış değil. (Şimdi ortalandığını iddia eden üç kişi var, ama neye baktıklarını bilmiyorum ...)

Görüntüler için bir liste kullanıyorsunuz ve varsayılan olarak sol tarafta bir dolgu var.

Aralarında boşluk bulmak için bağlantılarda dolgu kullanıyorsunuz, ancak sol ve üst taraflarda sadece dolgu yapıyorsunuz, böylece solda fazladan boşluk ekleyeceksiniz.

Soldaki dolguyu listede sıfır olarak ayarlayın:

.gallery ul{
  list-style-type:none;
  text-align:center;
  padding-left: 0;
}

Bağlantılarda sol ve sağ dolguyu daha da eşit yapın:

.gallery ul a {
  display:block;
  text-decoration: none;
  color:#FFF;
  padding:5px 2px 0 3px;
}
0
katma
çok teşekkürler. Mükemmel görünüyor!
katma yazar user979331, kaynak

Haklısın, ortalanmış değil.

Sanırım, ama emin değilim ki, bu bir dolgu meselesi olabileceği gibi, yastığı sola döndürdüğünüzde, ancak kabın içindeki birkaç öğeye eşit olarak değilsiniz.

tüm sol dolgu 0px'e (veya eşit dolgu sağ ve sol tuşlarını kullanın) bunun gibi - dolgu: 5px 5px; veya her görüntüde 0 dolgu ve eşit marj bulunabilir: 5px 5px;

0
katma