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

Question

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

追加された 27 10月 2011 〜で 08:21 著者 user979331

ビュー: 10

源

どのブラウザが問題を引き起こしていますか？クロムでうまくいく

追加された 27 10月 2011 〜で 08:34, 著者 Madara Uchiha, 源

おっとり - あなたの言っていることを理解できませんでした。私はあなたが真ん中の大きな箱を意味していると思っていました。文字通りその箱の中のギャラリーではありませんでした。 @fixlrが正しいです - あなたはリスト上のパディングを削除する必要があります。あなたは明らかにしておくべきです。

追加された 27 10月 2011 〜で 08:35, 著者 Nightfirecat, 源

いいえ:)それは中心です

追加された 27 10月 2011 〜で 08:22, 著者 Joseph Marikle, 源

4 答え

著者 fixlr · Answer 1 · 2011-10-27T08:31Z

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

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

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

著者 nheinrich · Answer 2 · 2011-10-27T08:27Z

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/

著者 Guffa · Answer 3 · 2011-10-27T08:33Z

それは中心にない。（今は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;
}

著者 Daniel Hunter · Answer 4 · 2011-10-27T08:42Z

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

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

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