html

Question

はの#container中心にあると思います#main_content。ただし、そうではありません。なぜこれが機能しないのですか、どうすれば修正できますか？

#main_content {
  top: 160px;
  left: 160px;
  width: 800px;
  min-height: 500px;
  height: auto;
  background-color: #2185C5;
  position: relative;
}

#container {
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 10px;
  position: relative;
}

<div id="main_content">
  <div id="container">
  </div>
</div>

score 143 · Accepted Answer

widthコンテナのを設定する必要があります（機能しautoません）：

#container {
    width: 640px; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

MDNによるCSSリファレンスはそれをすべて説明しています。

これらのリンクをチェックしてください：

jsFiddleで動作中。

score 47 · Accepted Answer

技術的には、内側のDIV（#container）は水平方向の中央に配置されます。わからない理由は、CSSwidth: autoプロパティを使用すると、内側のDIVが親と同じ幅に拡張されるためです。

このフィドルを参照してください：http：//jsfiddle.net/UZ4AE/

#container {
    width: 50px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    background-color: red;
}

この例では、の幅を#containerに50px設定し、背景をに設定して、red中央に配置されていることを確認します。

本当の質問は「CSSで要素を水平方向に中央揃えするにはどうすればよいですか？」だと思います。答えは（ドラムロールをお願いします）です：それは状況次第です！

W3Schoolsがここでうまく行っている場合、CSSで物事を中心に置くための無数の方法の完全な再ハッシュは行いません：http ：//www.w3schools.com/css/css_align.aspしかし、基本的な考え方はブロックレベルの要素のそれです目的の幅を指定し、左右の余白をに設定するだけですauto。

.center {
    margin-left: auto;
    margin-right: auto;
    width: 50px;
}

注意：この回答はブロックレベルの要素にのみ適用されます！インライン要素を配置するには、最初のブロックの親text-align: centerでプロパティを使用する必要があります。

score 39 · Accepted Answer

別の興味深い方法:フィドル

CSS

.container {
   background: yellow;
   width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}

.centered-div {
   width: 80%;
   height: 190px;
   margin: 10px;
   padding: 5px;
   background: blue;
   color: white;
}

    <div class="container">
        <div class="centered-div">
            <b>Enjoy</b>
        </div>
    </div>

score 14 · Accepted Answer

この小さなコードで float div を中央に配置できます。

#div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    
    margin-top: -100px;
    margin-left: -100px;
}

score 13 · Accepted Answer

今すぐあなたを定義してください

#main_content text-align:centerそしてあなたを定義します #container display:inline-block;

このように：

#main_content {
    text-align: center;
}

#container{
    display: inline-block;
    vertical-align: top;
}

score 9 · Accepted Answer

追加してみる

text-align: center;

親コンテナの CSS 宣言に追加します。そして、子コンテナに次のようにします:

display: inline-block;

それはトリックを行う必要があります。

score 4 · Accepted Answer

手始めに、より具体的な幅を定義してみます。すでに幅全体にまたがっているものを中央に配置するのは困難です。

#container {
    width: 400px;
}

score 4 · Accepted Answer

4

margin:0 auto;子divに使用します。次に、子 div を親 div の中央に配置できます。

于 2013-03-13T12:30:58.297 に答える

score 3 · Accepted Answer

を取得してみてposition:relative;ください#container。に正確な幅を追加し#containerます：

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: 600px;
    height: auto;
    margin: auto;
    padding: 10px;
}

作業デモ

score 3 · Accepted Answer

解決策は次のとおりです。

#main_content {
    background-color: #2185C5;
    height: auto;
    margin: 0 auto;
    min-height: 500px;
    position: relative;
    width: 800px;
}

score 3 · Accepted Answer

Flexbox ディスプレイを使用して div を簡単に中央に配置する新しい方法を次に示します。

この作業フィドルを参照してください: https://jsfiddle.net/5u0y5qL2/

CSSは次のとおりです。

.layout-row {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.layout-align-center-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-align-content: center;
    align-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

score 3 · Accepted Answer

#main_content {
    width: 400px;
    margin: 0 auto;
    min-height: 300px;
    height: auto;
    background-color: #2185C5;
    position: relative;
}

#container {
    width: 50%;
    height: auto;
    margin: 0 auto;
    background-color: #CCC;
    padding: 10px;
    position: relative;
}

これを試して。それはOKをテストしました。jsfiddle にはライブチェックがあります。

score 3 · Accepted Answer

多分あなたはこのようにしたい:

HTML

<div id="main_content">
    <div id="container">vertical aligned text<br />some more text here
    </div>
</div>

CSS

#main_content {
    width: 500px;
    height: 500px;
    background: #2185C5;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#container{
    width: auto;
    height: auto;
    background: white;
    display: inline-block;
    padding: 10px;
}

どのように？

テーブルセルでは、垂直方向の中央揃えは、要素に対して垂直方向の中央揃えに設定され、要素text-align: center;に対する水平方向の配置として機能します。

これは行の状態にあるため、#container が inline-block にある理由に気付きました。

score 2 · Accepted Answer

中央にdivを作成します。div の幅を割り当てる必要はありません。

実際のデモは次のとおりです。

http://jsfiddle.net/6yukdmwq/

    .container {
        width: 100%;
        height: 500px;
        display: table;
        border: 1px solid red;
        text-align: center;}

    .center {
        display: table-cell;
        vertical-align: middle;
    }

    .content {
        display: inline-block;
        text-align: center;
        border: 1px solid green;
    }

    <section class="container">
        <div class="center">
            <div class="content">
                <h1>Helllo Center Text</h1>
            </div>
        </div>
    </section>

score 2 · Accepted Answer

みんな言ってたけど、また言っても損はないと思います。

widthを何らかの値に設定する必要があります。ここに、理解しやすいものがあります。

http://jsfiddle.net/XUxEC/

score 1 · Accepted Answer

幅が自動に設定されているためです。視覚的に中央に配置するための幅を指定する必要があります。

#containerは、＃main_contentの幅全体に広がります。それが中央に配置されていないように見える理由です。

score 1 · Accepted Answer

ブロック要素に設定width: autoすると、幅は100％になります。autoしたがって、ここに価値があることは実際にはあまり意味がありません。デフォルトではすべての要素が自動高さに設定されているため、高さについても実際には同じです。

つまり、最終的にdiv#containerは実際には中央に配置されますが、親要素の幅全体を占めるだけです。中央揃えを正しく行い、幅を変更するだけで（必要に応じて）、実際に中央に配置されていることを確認できます。#main_contentを中央に配置したい場合は、それを適用するだけmargin: 0 auto;です。

score 1 · Accepted Answer

を設定しないwidthと、取得できる最大幅が取得されます。divしたがって、が中心にあることがわかりません。

#container
{
    width: 50%;
    height: auto;
    margin: auto;
    padding: 10px;
    position: relative;
    background-color: black;  /* Just to see the different */
}

score 1 · Accepted Answer

これが必要な出力である場合は、これを試してください。

<div id="main_content" >
    <div id="container">
    </div>
</div>

#main_content {
    background-color: #2185C5;
    margin: 0 auto;
}

#container {
    width: 100px;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    background: red;
}

score 1 · Accepted Answer

「top:200px;」をリセットする必要があるかもしれませんが、これはうまくいくと思います。あなたの必要性に従って:

#main_content {
    top: 160px;
    left: 160px;
    width: 800px;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
    border: 2px solid #CCCCCC;
}

#container {
    width: 100px;
    height: 20px;;
    margin: 0 auto;
    padding-top: 10px;
    position: relative;
    top: 200px;
    border: 2px solid #CCCCCC;
}

score 1 · Accepted Answer

の幅を設定したくない場合は#container、追加するだけです

text-align: center;

に#main_content。

score 1 · Accepted Answer

このようにCSSコンテンツを作成してください...

#main_content {
    top: 160px;
    left: 160px;
    width: auto;
    min-height: 500px;
    height: auto;
    background-color: #2185C5;
    position: relative;
 }

#container {
    height: auto;
    width: 90%;
    margin: 0 auto;
    background-color: #FFF;
    padding: 10px;
}

実際の例はこちら: http://jsfiddle.net/golchha21/mjT7t/

score 1 · Accepted Answer

.parent {
    width: 500px;
    height: 200px;
    border: 2px solid #000;
    display: table-cell;
    vertical-align: middle;
}

#kid {
    width:70%; /* 70% of the parent */
    margin:auto;
    border:2px solid #F00;
    height: 70%;
}

これは、親 div に class="parent" があり、子 div に id="kid" があるという問題を非常にうまく解決します (すべての新しいブラウザーでテスト済み)。

そのスタイルは、水平方向と垂直方向の両方の中心にあります。垂直方向の中央揃えは、複雑なトリックを使用するか、親 div をテーブルセルとして機能させることによってのみ行うことができます。これは、垂直方向の配置を適切にサポートする HTML の唯一の要素の 1 つです。

子供の高さ、マージンの自動、および中央の垂直方向の配置を設定するだけで機能します。それは私が知っている最も簡単な解決策です。

score 1 · Accepted Answer

中央に配置する div に幅を割り当てる必要があります。

このような：

#container {
    width: 500;
    margin: 0 auto;
    padding: 10px;
}

これらのリンクの詳細と例:

html - あるdivを別のdivの中央に配置するにはどうすればよいですか？

27 に答える 27

CSS

HTML

HTML

CSS

どのように？

Related

Reference