Iets centreren in HTML/CSS

Ik denk dat ik misschien een probleem heb, niet zeker of het een probleem is, want ik heb er al zo lang naar gekeken, ik weet niet eens of het gecentreerd is of niet.

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

Wat ik probeer te doen, is de hele galerij centreren, voor mij lijkt het een beetje naar rechts. Als iemand me kan helpen erachter te komen, zou dat geweldig zijn. Alvast bedankt.

CSS-CODE

.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
Welke browser geeft u problemen? Ziet er goed uit in chroom
toegevoegd de auteur Madara Uchiha, de bron
Whoops - begreep niet wat je zei. Ik dacht dat je de grote doos in het midden bedoelde, niet de letterlijke in dat vak. @fixlr heeft gelijk: je moet de opvulling in de lijst verwijderen. Je had het moeten verduidelijken.
toegevoegd de auteur Nightfirecat, de bron
nee, het is midden
toegevoegd de auteur Joseph Marikle, de bron

4 antwoord

Het lijkt erop dat je alleen de linker padding op het element in je .gallery hoeft te verwijderen:

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

Afhankelijk van de webbrowser die u gebruikt, is er meestal een standaardpadding in lijsten.

3
toegevoegd

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

Alles wat je nodig hebt is

.gallery ul {
  padding: 0;
}

Original:

Een ding dat je misschien wilt doen, is een tool oppikken zoals XScope: http://iconfactory.com/software/xscope . Het is een applicatie met gereedschappen voor het ontwerpen (linialen, hulplijnen, frames voor browserafmetingen, enz.). De liniaal kan u hierbij helpen omdat het pixels op uw scherm meet. U kunt snel meten hoeveel pixels aan elke kant van uw lay-out zitten.

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

1
toegevoegd
Het is geen . Goede update echter.
toegevoegd de auteur Bojangles, de bron
Vandaar de tweede zin in mijn commentaar. Ik had de schermafbeelding al gemaakt, dus ik besloot het toch te plaatsen :-P
toegevoegd de auteur Bojangles, de bron
Ik deed. Hij heeft de laagste vertegenwoordiger van iedereen en heeft het juiste antwoord geplaatst. +1 voor jou voor het aanbevelen van die tools.
toegevoegd de auteur Bojangles, de bron
Realiseerde zich net dat hij het had over de inhoud van de site in plaats van de site zelf. Bijgewerkt met een eenvoudige oplossing om die bug te repareren.
toegevoegd de auteur nheinrich, de bron
:) Hij stemde in met fixlr, hij begreep wat er aan de hand was.
toegevoegd de auteur nheinrich, de bron

Het is niet gecentreerd. (Er zijn nu drie mensen die beweren dat het gecentreerd is, maar ik heb geen idee waar ze naar kijken ...)

U gebruikt een lijst voor de afbeeldingen en standaard een vulling aan de linkerkant.

U gebruikt vulling in de koppelingen om een ​​spatie ertussen te krijgen, maar u vult alleen aan de linker- en bovenzijde vulling in, dus dat voegt ook extra ruimte toe aan de linkerkant.

Zet de linker padding op nul in de lijst:

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

Maak de linker- en rechterpadding in de links gelijkmatiger:

.gallery ul a {
  display:block;
  text-decoration: none;
  color:#FFF;
  padding:5px 2px 0 3px;
}
0
toegevoegd
hartelijk bedankt. ziet er perfect uit!
toegevoegd de auteur user979331, de bron

Je hebt gelijk dat het niet gecentreerd is.

Ik denk, maar ben niet zeker, dat het misschien een opvulprobleem is, je zet de vulling links maar niet gelijk op een paar elementen in de container.

alle linker padding naar 0px (of gebruik dezelfde padding links en rechts zoals dit - opvulling: 5px 5px; of elke afbeelding kan 0 opvulling en gelijke marge hebben: 5px 5px;

0
toegevoegd