31

HTML に問題があります。私はインターネット全体を検索しましたが、まだ本当の答えはありません。

いくつかの画像を含む Web サイトがあり、それらを真ん中に配置したいと考えています。今、私の画面ではそれらは真ん中にありますが、それは私がそれらを片側に動かしてそこに置いたからです. 友達に見てもらうと、画像が中心からずれています。

ここにウェブサイトがあります。13.5 インチの画面を使用している場合は、真ん中に表示されます。

4

4 に答える 4

76

このようなものを試してみてください...

<div id="wrapper" style="width:100%; text-align:center">
<img id="yourimage"/>
</div>
于 2011-05-05T17:34:33.327 に答える
32

テキスト揃え:中央揃え

text-align:center要素を含む要素にスタイルを適用すると、それらの要素が中央に配置されます。

<div id="method-one" style="text-align:center">
  CSS `text-align:center`
</div>

トーマス・シールズはこの方法について言及しています

マージン:0 自動

margin:0 autoブロック要素にスタイルを適用すると、要素内でスタイルが中央に配置されます。

<div id="method-two" style="background-color:green">
  <div style="margin:0 auto;width:50%;background-color:lightblue">
    CSS `margin:0 auto` to have left and right margin set to center a block element within another element.
  </div>
</div>

user1468562 はこの方法について言及しています

センタータグ

<center></center>私の最初の答えは、タグを使用できるというものでした。これを行うには、必要なコンテンツをタグ間の中央に配置するだけです。 ただし、HTML4 の時点で、このタグは廃止されました。 <center>は現在も技術的にサポートされています (これを更新した時点で 9 年後) が、上記に挙げた代替 CSS をお勧めします。

<h3>Method 3</h1>
<div id="method-three">
  <center>Center tag (not recommended and deprecated in HTML4)</center>
</div>

この jsfiddleで、これら 3 つのコード サンプルの動作を確認できます。

以前の回答が古かったので、この回答を修正する必要があると判断しました。私が解決策としてそれを提案したとき、それはすでに廃止されていました.

于 2011-05-05T17:45:49.337 に答える
9

特定のケースでは、包含a要素を次のように設定できます。

a {
    display: block;
    text-align: center;
}

JS Bin デモ.

于 2011-05-05T17:42:21.783 に答える
7 
<div style='width:200px;margin:0 auto;> sometext or image tag</div>

これは水平に動作します

于 2012-11-14T13:52:39.243 に答える