CSSセンタリングトリック[終了]

https://stackoverflow.com/questions/148251

02-07-2019
|

質問

CSSのみを使用してxhtml要素をセンタリングするための私のお気に入りの式は次のとおりです。

display: block;
position: absolute;
width: _insert width here_;
left: 50%;
margin-left: _insert width divided by two & multiplied by negative one here_

それをサポートするブラウザには、より単純なmargin：autoメソッドもあります。コンテナの中央にコンテンツを強制的に表示する方法は他にもありますか？（垂直センタリングのボーナスポイント）

編集-おっと、余白の1つの「負の」部分を忘れてしまいました。修正。

解決

マージン付きスティック：0 auto;水平方向の整列用。垂直方向の配置も必要な場合は、position：absolute;を使用します。トップ：50％;マージントップ：-（width / 2）px;ただし、コンテナの幅が画面の幅よりも大きい場合、Position：absoluteメソッドを使用すると、コンテナの一部が左側の画面から落ちます。

他のヒント

div #centered{
 margin: 0 auto;
}

私の経験から最も信頼できるようです。

まあ、それは大規模なやりすぎのように思えます、私は言わざるを得ません。コンテナーを古いブラウザーの場合は text-align：center; に、最近のブラウザーの場合は margin：auto; に設定し、そのままにしておきます。次に、要素のtext-alignをリセットします（テキストが含まれている場合）。

もちろん、ブロックとして設定する必要があるものと、幅を設定する必要があるものがあります...しかし、一体何をハックする必要があるスタイルにしようとしていますか？

<div style="text-align:center">
     <div style="width:30px; margin:auto; text-align:left">
         <!-- this div is sitting in the middle of the other -->
     </div>
</div>

Margin：autoは、IEが標準モードになっていることを確認する限り、すべてのブラウザーで機能します。

他のものよりも選り好みしやすく、ドキュメントの最初にdoctypeが必要です。つまり、ドキュメントの前に空白（スペース、タブ、または改行）がないことを意味します。

これを行う場合、margin：autoを使用してください。：）

margin：auto;メソッドは、ブラウザが中央に配置するアイテムの幅と親コンテナの幅を計算できる場合にのみ機能します。多くの場合、width：autoを設定します。動作しますが、一部では動作しません。

これはCSSトリックの便利なブックマークです

http://css-discuss.incutio.com/

lots of センタリングトリックも。

50％アプローチによる絶対配置には、ブラウザウィンドウが要素よりも狭い場合、ブラウザの左側にコンテンツの一部が表示されるという重大な副作用があります-スクロールする方法はありません。

自動マージンに固執-はるかに信頼性が高い。

標準モードで作業している場合（そうする必要があります）は、気にする可能性のあるすべてのブラウザーでサポートされています。

Internet Explorer 5.5以前を本当にサポートする必要がある場合は、テキスト配置ハックを使用できます。

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

これは、すべての通常のブラウザーでうまく機能します。既に述べたように、 margin：0 auto; はIEのすべての半最新バージョンでは動作しません。

これを試してください。 IEで動作するかどうかはわかりませんが、Fxでも動作します。 CSSのみ（JavaScriptを使用しない）、margin-autoを使用しないでページのDIVブロックを中央に配置し、DIVブロック内のテキストは左揃えのままです。私は、垂直方向のセンタリングも同様に機能するかどうかを調べようとしていますが、これまでのところ成功していません。

<html>
<head>
<title>Center Example</title>
<style>
.center {
   clear:both;
   width:100%;
   overflow:hidden;
   position:relative;
}
.center .helper {
   float:left;
   position:relative;
   left:50%;
}
.center .helper .content {
   float:left;
   position:relative;
   right:50%;
   border:thin solid red;
}
</style>
</head>
<body>
<div class="center">
   <div class="helper">
      <div class="content">Centered on the page<br>and left aligned!</div>
   </div>
</div>
</body>
</html>

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

CSSセンタリングト​​リック[終了]

CSSセンタリングトリック[終了]