テキストを真ん中に（垂直に）整列する方法

私は今この数時間で苦労していますが、解決策を見つけることができません。私は、テキストの長さとブラウザのサイズを調整するこの素晴らしいグリッドを作った。今問題は、テキストをボックスの中央に置くことができないということです。テキストを真ん中に（垂直に）整列する方法

私はすべてを試みました。これを達成するためにいくつかのプロパティを使用しましたが、何も機能しませんでした。

text-align: center; 
vertical-align: middle; 
line-height: "same as div";

CSSコード：

.parent { 
    text-align:center; 
    margin:0px; 
    width:100%; 
    padding:0px; 
    font-size:18px; 
    color:#000; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: justify; 
    -webkit-justify-content: space-between; 
    -ms-flex-pack: justify; 
     justify-content: space-between; 
} 

.child { 
    padding:18px 25px; 
    background: rgba(0, 0, 0, .5); 
    list-style-type:none; 
    width:inherit; 
    margin:5px; 

}

出典

2015-12-17 justme

クイックでシンプルな：flexboxで垂直方向にセンター - http://stackoverflow.com/a/33049198/3597276 –

これはあなたが望むものですか？

.parent { 
 
    text-align:center; 
 
    margin:0px; 
 
    width:100%; 
 
    padding:0px; 
 
    font-size:18px; 
 
    color:#000; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    vertical-align: middle; 
 
    -webkit-box-pack: justify; 
 
    -webkit-justify-content: space-between; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 

 
} 
 

 
.child { 
 
    position: relative; 
 
    background: rgba(0, 0, 0, .5); 
 
    padding:10px; 
 
    list-style-type:none; 
 
    width:inherit; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height:inherit; 
 
    display: inline-flex; 
 
    vertical-align: middle; 
 
    margin:5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
<div class="parent"> 
 
    <div class="child"><span>sometext</span></div> 
 
    <div class="child">somemoretext somemoretext</div> 
 
    <div class="child">sometext</div> 
 
    <div class="child">sometext</div> 
 
</div> 
 
<div class="parent"> 
 
    <div class="child">somemoretext somemoretext somemoretext somemoretext</div> 
 
    <div class="child">sometext</div> 
 
</div> 
 
</body> 
 
</html>

これはウルjsfiddleとしてフレックスで行われます。 Uフレックススタイルを削除することで、「親表示テーブルと縦方向に真ん中」と「子表示テーブルセルとバン中央」で簡単に行うこともできます。

出典

2015-12-18 00:24:06 Vinc

かなり良いですね！これがほとんどのブラウザで動作するかどうか尋ねてもいいですか？ :)ありがとう、あなたの入力のために:) – justme

あなたはcssの互換性について[ここ]（http://caniuse.com/#search=flex）をチェックできます！私の意見はthaフレックスは多くのブラウザとフレームワークでサポートされていると私は安全だと思う..あなたの残りのCSSは大丈夫だと思う。 – Vinc

ありがとう:)良い一日を – justme

あなたが試してみました：

マージン：0自動;

出典

2015-12-17 23:56:19 leham789

はい、それはすべてを混乱させました！ – justme

あなたは私が自分で試してみることができるようにあなたの整列のためのHTMLを投稿できますか？ – leham789

ここにあります：http://codepen.io/mariomez/pen/jWqBOv – justme

複数のテキスト行を含むdivが実際のテキストコンテンツの高さに調整されても構わない場合は、child要素でheight:100%を使用してください。

あなたが同じ高さに滞在するすべてのコンテンツが必要な場合は、あなたがあなたのウィンドウのサイズが変更されwhenverピクセル単位であなたの固定の高さを変更する必要がある場合は、単にCSSルールを変更するにはJavaScriptを使用

// Use any fixed value 
    line-height: 50px; 
    height: 50px;

を追加します（存在する場合この方法を使用すると、最初にthisを読んで、ウィンドウが変更されたときにクライアントの速度を落とさないようにします。

出典

2015-12-18 00:16:49

テキストを真ん中に（垂直に）整列する方法

答えて

関連する問題