1

たとえば、私のHTMLは次のいずれかです。

  • <p>幅が400に設定されたテキスト
  • 全体の幅が設定されていない、入力が少ないフォーム
  • <table>全幅が設定されていない
  • または他の何か

言い換えれば、上記のいずれかを中央に配置する前は、自然に左側にあります。そのHTMLが何であれ中央に配置することは可能ですか？

編集：もっと明確にしましょう。HTMLのチャンクは、インライン、ブロック、3つのdivと2つのps、5つのテーブルと1つのdiv、div内のdivなど、何でもかまいません。htmlチャンクは、中央に配置されることを認識していません。自分自身を中心に置くことができます。次の行に沿って何かが必要です-このHTMLのチャンクを親divでラップしてから、親divでのみCSSを使用しましょう。HTMLチャンクを調整していないところに沿った何か。縦ではなく横に中央に配置したい。まだ左側にある場合と同じようにレンダリングしたい。

4

3 に答える 3

1

ねえ2つのオプションがあります最初は非常に古いオプションです

<center>
//your html any element 
</center>

しかし、これは非常に古い方法です

そして新しいオプションは

あなたはこれに次のように慣れることができます

css

.ok{
border:solid 1px red;
  width:400px;
  text-align:center;
}
table{
margin:0 auto;
}

HTML

<div class="ok">

<p>
Hello
</p>

<a href="#">a</a>
<form>
<input type="text">
</form>

  <table border="1">
    <tr><td>hi</td></tr>
  </table>

  </div>

ライブデモhttp://tinkerbin.com/j1A3HIK9

于 2012-07-25T07:10:06.637 に答える
0

要素を別の要素の中央に設定する場合は、子要素の相対位置またはデフォルトの位置を割り当て（絶対位置は行いません！）、固定幅を指定し、マージンをに設定する0 autoと、水平方向に中央に配置されます。親要素。もちろん、要素を垂直方向に中央揃えする方法はありません。自分で明示的に中央揃えにする必要があります。

于 2012-07-25T07:17:19.277 に答える
0

はい、あなたが指摘したすべての要素で可能です。

次の HTML を使用します。

<body>

<div class="canvas">

    <p>This is a really lovely but meaningless piece of text</p>

    <div class="form-container">

        <form>

            <input type="text" name="example" placeholder="Enter some example text" />

        </form>

    </div>

</div>

</body>

そのため、いくつかの要素を中央に配置したいと考えています。含まれている DIV #canvas から始めて、そこから移動しましょう。

/* First a very crude reset on <body> and declare it's dimensions */

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* Next we must declare a definitive width of our #canvas to allow
   us to centre itself and elements within it. */

#canvas {
    width:960px;
    position:relative;
    margin: 0 auto; /* This 'auto' on left / right margin centers it
}

/* Note that <p> tags are auto 100% width so centering them is not
   going to do anything with the above technique. Instead: */

#canvas p {
    text-align: center;
}

/* Now form elements, no need to style <form> it is a meta container
   and really shouldn't be used for anything other than that, lets
   style the actual input elements instead */

#canvas form input {
    width: 30%; /* Lets define a width so that we can center it in */
    margin: 0 auto;
}

お役に立てば幸いです。

于 2012-07-25T07:28:39.013 に答える