web-dev-qa-db-ja.com

CSSを使用し、ハックのないシンプルなオブジェクトを中央に配置する

ハッキングなしでCSSを使用してオブジェクトを中央に配置したいのですが、これは可能ですか？

私はこれを試してみましたが、私のpタグはなくなりました。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
}
html5css3center
24
Caspert

要素を中央に配置するにはいくつかの方法があります。しかし、それはあなたの要素が何であるか、そしてそれをどのように表示するかによって異なります。

  • {display:inline; }がある場合

    これは簡単です。 「text-align：center;」のみを使用できます。テキスト、画像、divを中央に配置します。

  • {display:block;}がある場合

    これはもう少し難しいです。オブジェクトの配置方法によって異なります。オブジェクトは、相対、絶対、または固定です。

    • 相対的な場合; "margin:0 auto;"を使用できますが、幅の値が必要になります。

    • 絶対に配置されている場合は、"top:"および"left:"値を指定する必要があります。幅も必要です。要素の幅がわかっている場合、最良の方法は{left:50%; margin-left:-X}を使用することです（Xは要素の幅の1/2）。

39
CharlieM

HTML：

<div>Centered</div>

CSS：

div {
    margin: 0 auto;
    width: 200px;
}

ライブの例： http://jsfiddle.net/v3WL5/

ご了承ください margin: 0 auto;は、divに幅がある場合にのみ効果があります。

6
daGUY

つかいます margin: auto このような：

margin: 0px auto
1
Mikhail Vladimirov

これを一般的な目的に使用します。何でもあるspanまたはdivでも：

width:inherit; display:block;margin:0 auto;
1
Sinan ÇALIŞKAN

使用法 ：

  1. インライン使用：コンテンツはここに行きます...

  2. CSSコード：

    #text-align { text-align:center }

HTMLコード：

<div id="text-align">Content goes here....</div>

http://www.techulator.com/resources/4299-center-Deprecated-tags-HTML.aspx

0
user3152769

ゲームに遅れたが、display:flex親に対して？

simpleであり、すべてのタイプの要素で動作する便利なクラスがあります：

/* apply this on the parent */
.center {
    display:flex;
    align-items: center; /*vertical alignement*/
    justify-content: center; /* horizontal alignement*/
}

これは比較的新しいものですが、 主要なブラウザの〜98％でサポートされています です。

ただし、flexBoxについて少し学ぶことをお勧めします。最初は複雑に見えるかもしれませんが、すべてのタイプのレイアウトに対して非常に強力です。

0
538ROMEO