0

ここで作成しているdivボックスを中央に配置したいのですが、ボックス内のテキストを中央に配置したくないので、これを行う方法が見つからないようです。今のところ私が持っているのはこれです：

.box {
        text-align: left;
        background-color:#3F48CC;
        color:white;
        font-weight:bold;
        margin:120px auto;
        height:150px;
        display: inline-block;
        width: 200px;
    }

と

<div class=box>
    Login
    <form method ="post" action="addMember.php">
      <label for="name">Username:</label>
      <input name="name"/>
      <label for="password">Password:</label>
      <input name="password"/>
        <p>
        <input name="submit" type="Submit" value="Register"/>
        <input name="reset" type="reset" value="Clear Form">
  </form>
 </div>

前もって感謝します！

4

3 に答える 3

6

削除( display: inline-block;& )text-align:center

inline-blockwidth/heightdiv に対してを定義する場合は必要ありません。

デフォルトでは div はblock要素です。

.box {       
        background-color:#3F48CC;
        color:white;
        font-weight:bold;
        margin:120px auto;
        height:150px;        
        width: 200px;
    }

デモ

于 2013-01-11T09:51:39.880 に答える
0

デッドセンターを使用...

.box {
    text-align: left;
    background-color:#3F48CC;
    color:white;
    font-weight:bold;
    height:150px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -100px;
    margin-top: -75px;
}

注:負のマージンは、高さと幅のちょうど半分であり、要素を完全な中央に引き戻します。固定の高さ/幅の要素でのみ機能します。

より詳しい情報：

于 2013-01-11T09:56:59.930 に答える
0

jsFiddle デモ

Centered FormおよびこのCSS3 Versionを使用した代替 jsFiddle DEMO。

フォームを正しく見せるための鍵はpadding、ボックス モデルの一部である を使用することです。そうすることで、側面を埋めることができ、テキストを左揃えに保つことができます。

HTML 

<div class=box>Login
  <form method="post" action="addMember.php">
    <label for="name">Username:</label>
    <input name="name" />
    <label for="password">Password:</label>
    <input name="password" />
    <div class="buttons">
      <input name="submit" type="Submit" value="Register" />
      <input name="reset" type="reset" value="Clear Form" />
    </div>
  </form>
</div>

CSS: 

.box {
  background-color:#3F48CC;
  color:white;
  font-weight:bold;
  height:150px;
  width: 150px;
  padding: 10px;
}

.buttons{
  padding-top: 20px;
}

スクリーンショット:
ここに画像の説明を入力

于 2013-01-11T09:59:17.197 に答える