1. ホーム
  2. 質問と答え
  3. divの行を基準にした垂直方向のテキストの整列

divの行を基準にした垂直方向のテキストの整列

2017-09-22 5 views
1

左のdivのテキスト "アドレス"を垂直に整列しようとしています。しかし、私はできません。ここでdivの行を基準にした垂直方向のテキストの整列

は、コード、

div.row { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
.centre { 
 
    display: block; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    background: yellow; 
 
    height: 100%; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-3 centre"> 
 
     <label>Address</label> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="row"> 
 
     <!--nested row one--> 
 
     <div class="col-md-6"> 
 
      <label>Street</label> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <input name="stname"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <!--nested row two--> 
 
     <div class="col-md-6"> 
 
      <label>Landmark</label> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <input name="lmark"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <!--nested row three--> 
 
     <div class="col-md-6"> 
 
      <label>Zip code</label> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <input name="zipcode"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--row end--> 
 
</div>

私は間違って何をやっています。私はこのような結果を持ってしようとしています

（フルスクリーンで表示Plunker）https://plnkr.co/edit/cu4ZJVSp3jYTyBwz4NKB?p=preview：私は

Plunker bootsrap 3を使用しています。色付きの枠線は、enter image description hereの表示のみです。

出典

2017-09-22 gowtham raj j

+0

必要な設計で画像を添付してください。 –

+0

アドレスフィールドは、左の3つのネストされた行に対して垂直方向に配置する必要があります。プランカーの出力を別のウィンドウで表示してください。アドレスはページの上部にあり、垂直には並べられません。 –

+0

[CSSを使用してテキストを縦に配置するにはどうすればいいですか？]（https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css） –

答えて

0

行クラスで新しいクラスを追加する必要があります。の高さを取る移動Yを使用して、その後、（親の高さを取る）を50％と現在の要素

相対的な位置付けは％値をとっていなかったので、私は絶対値を使用しました。 しかし、absoluteを与えるとdivがドキュメントフローから出てきます。したがって、左の兄弟の幅を持つ右の兄弟には "left"が使用されます。

結果（ブートストラップなし）

.parent{ 
    position: relative; 
} 
.centre{ 
    background: yellow; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 
.right{ 
    left: 25%; 
    /* width of left sibling, since col-md-3 is 25%*/ 
    background: lightgreen; 
}

（ブートストラップ付き）Plnkr LinkまたはJsFiddle：

Result

出典

2017-12-25 22:20:30

0

あなたは代わりに、それはあなたのvertical-align:middleので、動作しない、中心のdiv

enter image description here

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <script src="script.js"></script> 
 
    <style> 
 
    div.row div{ 
 
     border: 1px solid black; 
 
     padding: 10px; 
 
    } 
 
    .centre label{ 
 
     display: block; 
 
     text-align: center; 
 
     vertical-align: middle; 
 
     background: yellow; 
 
     height: 100%; 
 
     padding:5px; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-3 centre"> 
 
     <label>Address</label> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <div class="row"><!--nested row one--> 
 
      <div class="col-md-6"> 
 
      <label>Street</label> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <input name="stname"> 
 
      </div> 
 
     </div> 
 
     <div class="row"><!--nested row two--> 
 
      <div class="col-md-6"> 
 
      <label>Landmark</label> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <input name="lmark"> 
 
      </div> 
 
     </div> 
 
     <div class="row"><!--nested row three--> 
 
      <div class="col-md-6"> 
 
      <label>Zip code</label> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <input name="zipcode"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div><!--row end--> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-09-22 13:38:24 codegeek

-1

内側のラベルである必要があり、中央のdivにスタイルを設定していますdisplay: blockの要素をそのように中央に配置することはできません。簡単な代替方法はdisplay: flexです。ここで

は道の表示を実証するためのスニペットです：フレックスは、ほとんどすべてをセンタリングするために使用することができます。

div.row div{ 
 
     border: 1px solid black; 
 
     padding: 10px; 
 
    } 
 
    .centre{ 
 
     display: block; 
 
     text-align: center; 
 
     vertical-align: middle; 
 
     background: yellow; 
 
     height: 100%; 
 
    } 
 
    .flex { 
 
    display: flex; 
 
    align-items: center; 
 
    }
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="flex"> 
 
     <div class="col-md-3 centre"> 
 
     <label>Address</label> 
 
     </div> 
 
     <div class="col-md-6"> 
 
     <div class="row"><!--nested row one--> 
 
      <div class="col-md-6"> 
 
      <label>Street</label> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <input name="stname"> 
 
      </div> 
 
     </div> 
 
     <div class="row"><!--nested row two--> 
 
      <div class="col-md-6"> 
 
      <label>Landmark</label> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <input name="lmark"> 
 
      </div> 
 
     </div> 
 
     <div class="row"><!--nested row three--> 
 
      <div class="col-md-6"> 
 
      <label>Zip code</label> 
 
      </div> 
 
      <div class="col-md-6"> 
 
      <input name="zipcode"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </div><!--row end--> 
 
    </div>

EDIT：多分このガイドでは、あなたのための参考になります。 Centering in CSS: A Complete Guide

出典

2017-09-22 13:46:26 Maharkus

+0

Flexは素晴らしい選択肢です。 –

0

Code Pen

オフセットを削除して最大12グリッドのシステムに合わせることができます。今のよう

div.row { 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
.centre { 
 
    background: yellow; 
 
    top: 60px; 
 
    border: 1px solid blue; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-3 centre"> 
 
     <label>Address</label> 
 
    </div> 
 

 
    <div class="col-xs-8 col-sm-offset-1" style="border:1px solid green"> 
 
     <!--You can remove style and remove offset and change it to sm-9 --> 
 
     <div class="row"> 
 
     <!--nested row one--> 
 
     <div class="col-xs-6"> 
 
      <label>Street</label> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <input name="stname"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <!--nested row two--> 
 
     <div class="col-xs-6"> 
 
      <label>Landmark</label> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <input name="lmark"> 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <!--nested row three--> 
 
     <div class="col-xs-6"> 
 
      <label>Zip code</label> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <input name="zipcode"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!--row end--> 
 
</div>

、margin-topは試してみる価値オプションです。

出典

2017-09-22 13:46:57

0

ここでは、ネストされたもので、トップマージン/パディングをキャンセルし、その後ネストされていない列の一番上のマージン/パディングを設定するソリューションです：

Plunkr

関連するCSS：

[class*="col-"] { 
    border: 1px solid black; 
    padding: 10px; 
} 
.row:first-child [class*="col-"] { 
    margin-top: 10px; 
    background-color: lightgreen; 
} 
.row .row:first-child [class*="col-"] { 
    margin-top: -10px; 
    background-color: pink; 
} 
.row .row:not(:first-child) [class*="col-"] { 
    margin-top: 0; 
    background-color: lightblue; 
}

ソリューション@codegeekでこれらの問題を回避するより良いです：

出典

2017-09-22 13:47:45 FelipeAls

+0

私は列のスタイルを設定しようとしているのではなく、左側の列を垂直方向に並べるようにしています。 –

+0

私は悪い言い回しを使用しました：_styling列で_私は "上の余白/パディングを設定/取り消し"を意味しました – FelipeAls

0

このコードをCSSファイルに追加して、垂直方向に整列させることができます。 しかし最初に、私は、トップ使って、左側のdivを配置

<!DOCTYPE html> 
<html> 

<head> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="script.js"></script> 
    <style> 

    .vertical > div { 
    display: table-cell; 
    vertical-align: middle; 
    float: none; 
} 

.vertical > div { 
    display: table-cell; 
    vertical-align: middle; 
    float: none; 
} 
    div.row div{ 
     border: 1px solid black; 
     padding: 10px; 
    } 
    .centre label{ 
     display: block; 
     text-align: center; 
     vertical-align: middle; 
     background: yellow; 
     height: 100%; 
     padding:5px; 
    } 
    </style> 
</head> 
<body> 
    <div class="container-fluid"> 
    <div class="row vertical"> 
     <div class="col-md-3 centre"> 
     <label>Address</label> 
     </div> 
     <div class="col-md-6"> 
     <div class="row"><!--nested row one--> 
      <div class="col-md-6"> 
      <label>Street</label> 
      </div> 
      <div class="col-md-6"> 
      <input name="stname"> 
      </div> 
     </div> 
     <div class="row"><!--nested row two--> 
      <div class="col-md-6"> 
      <label>Landmark</label> 
      </div> 
      <div class="col-md-6"> 
      <input name="lmark"> 
      </div> 
     </div> 
     <div class="row"><!--nested row three--> 
      <div class="col-md-6"> 
      <label>Zip code</label> 
      </div> 
      <div class="col-md-6"> 
      <input name="zipcode"> 
      </div> 
     </div> 
     </div> 
    </div><!--row end--> 
    </div> 
</body> 

</html>

出典

2017-09-22 13:50:29

関連する問題

 関連する問題