HTML/CSSで何かをセンタリングする

私は問題を抱えているかもしれないと思っています。問題があるかどうかは私が長い間soooooを見ていたので、私はそれが中心かどうかわかりません。

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

私がしようとしているのは、ギャラリー全体を中心にしています。私にはちょっと右のようです。誰かがこれを理解するのを助けることができれば、それは素晴らしいことだろう。ありがとうございました。

CSSコード

.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
追加された
ビュー: 5
源
ro ru fr es pt de hi bn ar kk tr uk
どのブラウザが問題を引き起こしていますか？クロムでうまくいく
追加された 著者 Madara Uchiha, 源
おっとり - あなたの言っていることを理解できませんでした。私はあなたが真ん中の大きな箱を意味していると思っていました。文字通りその箱の中のギャラリーではありませんでした。 @fixlrが正しいです - あなたはリスト上のパディングを削除する必要があります。あなたは明らかにしておくべきです。
追加された 著者 Nightfirecat, 源
いいえ:)それは中心です
追加された 著者 Joseph Marikle, 源

4 答え

.galleryの要素の左のパディングを削除する必要があるようです：

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

使用しているWebブラウザによっては、通常、リストにデフォルトのパディングがあります。

3
追加された
源

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

あなたが必要なのは

.gallery ul {
  padding: 0;
}

Original:

あなたがやりたいことは、XScopeのようなツールを選ぶことです： http://iconfactory.com/software/xscope 。これは、設計のためのツール（ルーラ、ガイド、ブラウザサイズフレームなど）を持つアプリケーションです。スクリーン上のピクセルを測定するため、ルーラーがこれを手伝うことができます。レイアウトの各辺のピクセル数を簡単に測定できます。

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

1
追加された
源
そうではありません 。しかし、良い更新、。
追加された 著者 Bojangles, 源
したがって、私のコメントの2番目の文章。私はすでにスクリーンショットを撮っていたので、とにかくそれを投稿することにしました： - P
追加された 著者 Bojangles, 源
やった。彼は全員の中で最も低い担当者を持ち、正しい答えを掲示した。それらのツールを推薦するためにあなたに+1してください。
追加された 著者 Bojangles, 源
ちょうど彼がサイト自体ではなくサイト内のコンテンツについて話していたことに気づいた。そのバグを修正するための簡単な解決策で更新されました。
追加された 著者 nheinrich, 源
:)アップルに投票して、彼は何が起こっているのか理解した。
追加された 著者 nheinrich, 源

それは中心にない。 （今は3人が中心にいると主張していますが、私は彼らが何を見ているのか分かりません...）

画像のリストを使用していて、デフォルトで左側にパディングがあります。

あなたはそれらの間のスペースを得るためにリンクでパディングを使用していますが、あなたは左と上の辺だけを埋めるので、余分なスペースも左に追加されます。

リストの左パディングを0に設定します。

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

リンク内の左右のパディングをより均一にする：

.gallery ul a {
  display:block;
  text-decoration: none;
  color:#FFF;
  padding:5px 2px 0 3px;
}
0
追加された
源
どうもありがとう。完璧に見える！
追加された 著者 user979331, 源

あなたは正しいです、それは中心にないです。

私は思うが、それはパディングの問題かもしれない、あなたは左にパディングを設定しますが、コンテナのカップルの要素に等しく右ではないことを確認します。

すべて0pxに左パディング（または等しいパディングを左右に使用 このように - パディング：5px 5px; または各画像は0のパディングと等しいマージンを持つことができます：5px 5px;

0
追加された
源