html - 順序付けされていないリストを水平方向に中央揃え

Question

非常に基本的な「近日公開」ページにある水平方向の順序付けられていないリストを中央に配置するのに問題があります。

サイトへのリンクをたどって、コードなどを見ることができます。3 つのソーシャル アイコンを含む水平方向のリストが、大きなヘッダーとメール アドレスに対して中央に配置されていないことに気付くでしょう。少し右に浮いているように見えます。

これを修正する方法についてのアイデアはありますか?

Answer 1

要素に設定padding-left:0;しますul。

-webkit-padding-start: 40px;これにより、 Google Chrome が中心位置をオフセットしているデフォルトのブラウザが上書きされます。他のブラウザのデフォルトは異なる場合があります。

Google Chrome でテストした結果、問題は解決しました。

Answer 2

@Curtの答えは正しいですが、要素をリセットする必要があり、そのために実際にこの問題に直面しています

これを使用してブラウザーのデフォルトをリセットします。私は常にスタイルシートの代わりにこれを使用しCSS Resetます..

* {
  padding: 0;
  margin: 0;
}

ブラウザは一部の要素にデフォルトのスタイルを設定しているため、Web ページで使用するpadding-left: 0;たびに宣言する必要はありません。したがって、この問題に直面しています。ul

Answer 3

要素から左パディングを削除します.social_list。

.social_list {
  padding: 0;
}

Firebug を使用すると、DOM を調べたときに要素のパディングとマージンが表示されるため、この種の問題を簡単に解決できます。