0

この質問は何百万回も聞かれていることを知っています。私が作成した他の Web サイトでこれらすべてのソリューションを既に使用しており、問題なく機能していました。

しかし、私の最近の状況では、通常の答えがうまくいきません。

これは、その中に他の要素を中央に配置する必要があるクラスです (つまり、リスト、テーブル):

.container {
    position: relative;
    width: 80%;
    height: 90%;
    background-color: #282828;
    box-shadow: inset -6px -6px 6px -2px #1d1d1d;
    color: #FFF;
    border-radius: 0 10px 0 0;
    float: left;
}

位置が に設定された別の子を中position: relativeに入れたので、 を追加しました。私は実際に物事を中心に置くことができましたが、それは私が必要とする種類の中心ではありません. 内部にテーブルのような div 構造を追加すると、左にまっすぐ戻りました-理由はわかりません。<div>.containerabsolute.container

助けていただければ幸いです。

JSFiddle: http://jsfiddle.net/J3jm7/3/

4

2 に答える 2

1

インライン要素のセンタリング

インライン要素を中央に配置するtext-align:centerには、コンテナで使用するだけです。

.container {
    text-align:center
}

デモ

ブロックレベル要素のセンタリング

margin:autoテーブルなどのブロック レベルの要素をコンテナ内の中央に配置するために使用します。

.container table {
    margin:auto;
}

デモ

リストのセンタリング

のため、リストは少し特殊なケースですli { display: list-item; }。a を中央に配置するには、それを要素に変更し、コンテナの中央に配置<ul>する必要があります。inline-block

.container {
    text-align:center
}

.container ul {
    padding:0;
    display:inline-block;
}

デモ

于 2013-10-25T20:49:34.283 に答える