html - div 横並び jsp




<div>をどのように水平に配置するのですか? (20)

テキスト整列:中央

text-align: center適用するtext-align: centerインラインコンテンツの中心は、ラインボックスの中央に配置されます。 しかし、inner divはデフォルトでwidth: 100%を持っているので、特定の幅を設定するか、次のいずれかを使用する必要があります:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

マージン:0オート

margin: 0 autoを使用するmargin: 0 autoは別のオプションであり、古いブラウザーとの互換性に適しています。 これはdisplay: tableと一緒に動作しdisplay: table

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

フレックスボックス

display: flexはブロック要素のように振る舞い、flexboxモデルに従って内容をレイアウトします。 これはjustify-content: centerます。

ご注意: Flexboxはほとんどのブラウザに対応していますが、すべてではありません。 ブラウザーとの互換性の完全かつ最新のリストについては、 hereを参照してください。

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

変換

transform: translate使用すると、CSSビジュアルフォーマットモデルの座標空間を変更できます。 要素を使用すると、要素を平行移動、回転、拡大縮小、および斜行することができます。 水平にするには、 position: absoluteleft: 50% position: absolute必要です。

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

<center> (非推奨)

タグ<center>は、 text-align: center代わりのHTMLです。 これは古いブラウザと新しいもののほとんどで動作しますが、この機能はobsoleteあり、Web標準から削除されているため、優れた方法とは考えられません。

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

CSSを使用して<div>を他の<div>中に水平に配置するにはどうすればよいですか?

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

水平方向のみセンタリング

私の経験上、ボックスを水平に配置する最も良い方法は、以下のプロパティを適用することです:

コンテナ:

  • text-align: center;が必要text-align: center;

コンテンツボックス:

  • display: inline-block;必要display: inline-block;

デモ:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

このフィドルも見てください!

水平および垂直両方向のセンタリング

私の経験上、垂直方向と水平方向の両方にボックスを配置する最も良い方法は、追加のコンテナを使用して次のプロパティを適用することです。

外側の容器:

  • display: table;必要がありdisplay: table;

内側のコンテナ:

  • display: table-cell;必要がありdisplay: table-cell;
  • vertical-align: middle;なければなりませんvertical-align: middle;
  • text-align: center;が必要text-align: center;

コンテンツボックス:

  • display: inline-block;必要display: inline-block;

デモ:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

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

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

このフィドルも見てください!


FirefoxとChromeの場合:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Internet Explorer、Firefox、Chromeの場合:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

text-align:プロパティは最新のブラウザではオプションですが、Internet Explorer Quirksモードでは従来のブラウザでサポートする必要があります。


Flexは97%以上のブラウザサポートを提供しており、数行でこれらの問題を解決する最良の方法です。

#outer {
  display: flex;
  justify-content: center;
}


widthを設定し、 margin-leftmargin-rightautoます。 しかし、それは水平だからです。 両方の方法が必要な場合は、両方の方法でやります。 実験するのを恐れないでください。 あなたが何かを壊すようなものではありません。


あなたはこのようなことをすることができます

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

これは#inner垂直に揃えます。 そうしたくない場合は、 displayプロパティとvertical-alignプロパティを削除します。


いくつかのポスターは、 display:boxを使用してCSS 3を中央に配置する方法について言及していdisplay:box

この構文は古く、もう使用すべきではありません。 [ この記事も参照]

ここでは、 フレキシブルボックスレイアウトモジュールを使用したCSS 3の最新の方法について説明します。

だから単純なマークアップがあれば:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...ボックス内にアイテムを集中させたい場合は、親エレメント(.box)に必要なものを次に示します。

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

フレックスボックスの古い構文を使用する古いブラウザをサポートする必要がある場合は、 here'sを見てください。


このCSSを内側の<div>適用することができます:

#inner {
  width: 50%;
  margin: 0 auto;
}

もちろん、 width50%に設定する必要はありません。 <div>を含む幅より小さい幅があれば動作します。 margin: 0 autoは実際のセンタリングと同じです。

IE8 +をターゲットにしている場合は、代わりにこれを使用する方がよいでしょう。

#inner {
  display: table;
  margin: 0 auto;
}

内側の要素の中心を水平にし、特定のwidthを設定せずに機能します。

ここでの作業例:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>


このメソッドもうまくいきます:

div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

内側の<div>場合、唯一の条件は、そのheightwidthがそのコンテナのheightwidthより大きくてはならないことです。


それに幅を与えないと、中央に置くことはできません。そうでなければ、デフォルトでは全体の水平スペースが必要になります。


たとえば、 次のリンクとスニペットを参照してください。

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

親の下に子供がたくさんいる場合、CSSコンテンツはこの例のようにフィドルでなければなりません。

HTMLコンテンツの見た目はこれが好きです:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

次に、この例のフィドルを見てください。


内側div固定幅を設定したくない場合は、次のようにすることができます:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

これにより、内側のdivtext-align可能なインライン要素になりtext-align


周りを遊んでみてください

margin: 0 auto;

テキストを中央に揃えたい場合は、次の方法を試してみてください。

text-align: center;

彼のブログに「Unknown in Centering in the Unknown」という優れた記事を書いたChris Coyier氏。 これは、複数のソリューションを集めたものです。 私はこの質問に掲載されていないものを掲示しました。 フレックスボックスソリューションよりブラウザサポートが多く、 display: table;は使用していませんdisplay: table; 他のものを壊す可能性があります。

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width:0;
  overflow:hidden;
}

/* The element to be centered, can
   also be of any width and height */ 
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

最も簡単な方法:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>


私が見つけた1つの選択肢が存在しました:

誰もが使用すると言う:

margin: auto 0;

しかし、別の選択肢があります。 親divのこのプロパティを設定します。 いつでも完璧に動作します:

text-align: center;

そして、子供が中心に行くのを見てください。

最後にあなたのためのCSS:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

私が通常やっているやり方は、絶対的な位置を使用している:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

外側のdivは、これが機能するために余分なプロパティを必要としません。


私はゲームにかなり遅れていることを理解していますが、これは非常に一般的な質問です。私は最近どこにも言及していないアプローチを見つけました。

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

EDIT:正しく機能するには、両方の要素が同じ幅でなければなりません。


私は最近、ページ内に中心を置く必要がある表形式を持つ「隠し」div(つまりdisplay:none;)を中心に配置しなければなりませんでした。 私は次のjQueryを書いて、隠しdivを表示し、CSSをテーブルの自動生成幅に更新し、マージンを中央に変更しました。 (ディスプレイトグルはリンクをクリックすることによって起動されますが、このコードは表示する必要はありませんでした)。

注:私はこのコードを共有しているので、Googleはこのソリューションを手に入れました。隠された要素は幅を持たず、表示されるまではサイズ変更/中央揃えができません。

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>





centering