24

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

私はこれを試しましたが、私のpタグがなくなっています。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
}
4

7 に答える 7

39

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

  • あなたが持っている場合{display:inline; }

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

  • あなたが持っている場合{display:block;}

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

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

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

于 2013-02-14T21:02:52.627 に答える
6

HTML：

<div>Centered</div>

CSS：

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

実例： http： //jsfiddle.net/v3WL5/

に幅があるmargin: 0 auto;場合にのみ効果があることに注意してください。div

于 2013-02-14T20:54:33.053 に答える
1

このように使用margin: autoします：

margin: 0px auto
于 2013-02-14T20:52:28.520 に答える
1

これを一般的な目的に使用します。スパンやdivでさえ、何でも内部にあります：

width:inherit; display:block;margin:0 auto;
于 2016-04-07T13:42:46.757 に答える
0

使用法 ：

  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

于 2014-01-02T07:17:09.633 に答える
0

display:flexゲームの後半ですが、親で試してみましたか？

シンプルですべてのタイプの要素で機能する便利なクラスがあります。

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

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

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

于 2019-03-26T21:16:57.137 に答える
-4

position：fixedである必要がない場合。あなたはただ使うことができます

<center>
Hello
</center>

これはHTML5では非推奨です

于 2013-11-22T10:56:16.413 に答える