web-dev-qa-db-ja.com

マテリアライズフレームワークの水平および垂直方向の配置

ログインボックスを水平と垂直の両方に中央揃えするにはどうすればよいですか？

これが私の構造です：

<div class="container">
<div class="row">
<div class="col s12 m6">
    <div class="card">
        <div class="card-content">
            <span class="card-title black-text">Sign In</span>
            <form>
                <div class="row">
                    <div class="input-field col s12">
                        <input placeholder="Placeholder" id="firstname" type="text" class="validate">
                        <label for="firstname" class="active">First Name</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input placeholder="Placeholder" id="lastname" type="text" class="validate">
                        <label for="lastname" class="active">Last Name</label>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-action">
            <input type="submit" class="btn" value="Sign In">
        </div>
    </div>
</div>

valign-wrapperおよびvalignクラスを使用してみましたが、機能しません。

htmlcssmaterial-designmaterialize
17
Ordidaad

厄介なcssを使用せずに、適切な（materializecss）方法を次に示します。

<div class="valign-wrapper" style="width:100%;height:100%;position: absolute;">
    <div class="valign" style="width:100%;">
        <div class="container">
           <div class="row">
              <div class="col s12 m6 offset-m3">
                 <div class="card">
                    <div class="card-content">
                       <span class="card-title black-text">Sign In</span>
                       <form>
                          <div class="row">
                             <div class="input-field col s12">
                                <input placeholder="Placeholder" id="firstname" type="text" class="validate">
                                <label for="firstname" class="active">First Name</label>
                             </div>
                          </div>
                          <div class="row">
                             <div class="input-field col s12">
                                <input placeholder="Placeholder" id="lastname" type="text" class="validate">
                                <label for="lastname" class="active">Last Name</label>
                             </div>
                          </div>
                       </form>
                    </div>
                    <div class="card-action">
                       <input type="submit" class="btn" value="Sign In">
                    </div>
                 </div>
              </div>
           </div>
        </div>
    </div>
</div>
12
friek108

単にoffsetを使用して整列します。カードビューを残りの半分だけオフセットします。

<div class="container">
  <div class="row">
    <div class="col s12 m6 offset-m3">
      <div class="card">
        <div class="card-content">
          <span class="card-title black-text">Sign In</span>
          <form>
            <div class="row">
              <div class="input-field col s12">
                <input placeholder="Placeholder" id="firstname" type="text" class="validate">
                <label for="firstname" class="active">First Name</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input placeholder="Placeholder" id="lastname" type="text" class="validate">
                <label for="lastname" class="active">Last Name</label>
              </div>
            </div>
          </form>
        </div>
        <div class="card-action">
          <input type="submit" class="btn" value="Sign In">
        </div>
      </div>
    </div>
9
dc-aoxn

この解決策を試してみてください、あなたに役立つことを願っています

.card {
     position: absolute;
     left: 50%;
     top: 50%;
     -moz-transform: translate(-50%, -50%)
     -webkit-transform: translate(-50%, -50%)
     -ms-transform: translate(-50%, -50%)
     -o-transform: translate(-50%, -50%)
     transform: translate(-50%, -50%);
}

また、あなたは試すことができます

body (or container-div) {
    display: flex;
    align-items: center;
    justify-content: center;
}
6
Kapil

Divのテキスト配置プロパティを設定します

<div class="input-field col s12" style="text-align:center">

<div class="input-field col s12" style="text-align:center">

 <input placeholder="Placeholder" id="lastname" type="text" class="validate" style="vertical-align:middle">

<input placeholder="Placeholder" id="firstname" type="text" class="validate" style="vertical-align:middle">

こちらをご覧ください http://jsfiddle.net/kuqqdswg/

0
repzero

htmlおよびbodyタグで始まる全高を継承する必要があります。

0
uruapanmexicansong

やってみました

.col.s12.m6{
    float: none;
    margin: 100px auto;
    width: 300px;
    height: 300px;
}

このフィドルを確認してください http://fiddle.jshell.net/8vu47fb2/

margin-top、margin-bottomを使用して、ボックスを中央に揃えます。

0
Jinu Kurian