0

ブートストラップ フレームワークに基づいて、サイトに統合される簡単な登録フォームを作成しました。

<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<body>
  <center><h2>Регистрационная форма</h2></center>
    <form class="form-horizontal" method='post' action='/contact.php' id='form'>
        <fieldset class="myfields">
        <div><label>Name: </label><input type='text' name='name' required id='name'></div>
        <div><label>Surname: </label><input type='text' name='surname' required id='surname'></div>
        <div> <label>Mail: </label><input type='email' name='email' required id='email'></div>
        <div><label>Phone: </label><input type='text' name='phone' required id='phone'></div>
        <div><label>Skype: </label><input type='text' name='skype' required id='skype'></div>
        <div><label>Assess: </label><select name='assistance' id='assistance'>
            <option value='With first parameter'>One</option>
            <option value='With second parameter'>Two</option>
        </select></div>
        <input class="btn btn-primary"  type='submit' value='Send'>
        </fieldset>
    </form>
</body>

およびこの CSS 構成:

<style type="text/css">
    .myfields label, .myfields input, .myfields select {
    display:inline-block;
    height: 35px;
    }
    form {
    text-align:center;
    }
    .myfields label, .myfields select {
    text-align:left;
    width:100px;
    }

    .myfields select {
    text-align:left;
    width:200px;
    }

    .myfields input {
    width:200px;
    }
</style>

登録ブロックをページの垂直中央に配置するにはどうすればよいですか? この場合、vertical-align は機能しません :-( Java スクリプトまたは CSS ソリューションである可能性がありますが、問題ではありません。

4

3 に答える 3

0

ページのコンテンツをコンテナ<div>の ID でラップし、次の CSS を適用します。

#container {
    position: absolute;
    top: 50%;
    height: 400px; /* big enough to wrap around the entire contents */
    margin-top: -200px; /* -(this.height / 2) */
}

理論では、div をページの 50% 下に「バンプ」してから、高さの半分に等しい負のマージンでページの上に戻します。

デモ: http://jsfiddle.net/AfNgu/2/

于 2013-08-21T07:31:21.517 に答える
0

次のことを試すことができます。

margin:0px auto;div タグにand width:400px;(中央になるまでいじることができます) を設定するとid="main"、セクション全体が中央に配置されます。私もAをあげましfieldsetたwidth

JSフィドルのデモ

于 2013-08-21T07:40:03.320 に答える
0

HTML

<body>
<div class="w1">
    <div class="w2">
        <center><h2>Регистрационная форма</h2></center>
        <form class="form-horizontal" method='post' action='/contact.php' id='form'>
            <fieldset class="myfields">
            <div><label>Name: </label><input type='text' name='name' required id='name'></div>
            <div><label>Surname: </label><input type='text' name='surname' required id='surname'></div>
            <div> <label>Mail: </label><input type='email' name='email' required id='email'></div>
            <div><label>Phone: </label><input type='text' name='phone' required id='phone'></div>
            <div><label>Skype: </label><input type='text' name='skype' required id='skype'></div>
            <div><label>Assess: </label><select name='assistance' id='assistance'>
                <option value='With first parameter'>One</option>
                <option value='With second parameter'>Two</option>
            </select></div>
            <input class="btn btn-primary"  type='submit' value='Send'>
            </fieldset>
        </form>
    </div>
</div>
</body>

CSS

html,body{height: 100%;}
    body{margin: 0;}
    .w1{
        min-height: 100%;
        text-align: center;
        height: 100%;
    }
    .w1:after{
        content: "";
        display: inline-block;
        min-height: 100%;
        vertical-align: middle;
        width: 1px;
    }
    .w2{
        display: inline-block;
        vertical-align: middle;
        text-align: left;
    }
    .myfields label, .myfields input, .myfields select {
    display:inline-block;
    height: 35px;
    }
    form {
    text-align:center;
    }
    .myfields label, .myfields select {
    text-align:left;
    width:100px;
    }

    .myfields select {
    text-align:left;
    width:200px;
    }

    .myfields input {
    width:200px;
    }
于 2013-08-21T07:56:33.340 に答える