同時に縦横の位置合わせができない

私は自分のウェブサイトをレイアウトするためにブートストラップを使用しています。 "THIS IS TEST"というテキストの垂直方向の配置を除いてすべてが問題ありません。私は、ウェブで見つけたさまざまな方法を、縦と横の組み合わせ：中とテキストの組み合わせ：センターとフレックスボックスのように使いました。これらのどれも正しい垂直方向のアライメントを生成しませんでした。ここに私のコードは次のとおりです。同時に縦横の位置合わせができない

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
<title>Bootstrap Example</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> 
    <style> 
.header{ 

font-weight: bold; 
font-size: 30px; 
background-color: #4070CB; 
color: #EFF0F2; 
height:60px; 

} 
.txt{ 
    align-items :center; 
    display : flex; 
    text-align: center; 
    justify-content: center; 
} 
.rightImg{ 
    margin-right:30px; 
    margin-left:12px; 
    } 
.leftImg{ 
margin-right:12px; 
margin-left:30px; 
} 

</style> 
</head> 
<body> 

<div class="container col-sm-offset-1"> 
    <div class="row"> 
    <div class="col-sm-10 header"> 
    <div class="row"> 
     <div class="col-sm-1 leftImg"><img src="http://image.flaticon.com/sprites/authors/28-simpleicon.png" alt="Smiley face" height="36" width="36"></div> 
     <div class="col-sm-8 txt">THIS IS A TEST</div> 
     <div class="col-sm-1 rightImg"><img src="http://image.flaticon.com/sprites/authors/28-simpleicon.png" alt="Smiley face" height="36" width="36"></div> 
    </div> 
    </div> 
    </div> 
<div class="row"> 
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div> 
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div> 
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-4</div> 
</div>

はまたここに私のコードにjfiddleのリンクです： jfiddle

は誰でも助けることはできますか？ヘッダ内のテキストをどのように縦に並べることができますか？

出典

2016-12-22 Hamed Minaee

親要素の高さは60pxです。 'line-height：60px'を使用して、60pxのコンテナ内にテキスト行を垂直にセンタリングします。これは浮動していない列のブートストラップの問題を修正するものではありません。何が起こっているのか分かりません。 –

あなたは出力をどのくらい正確に説明することができますか？出力についてはほとんどわかりません – Geeky

@JonUleisはお返事ありがとうございます。私はラインの高さを使用する場合、私のダイビングを縮小しますが、私は60の正確な高さが必要です –

あなたのテキストは垂直に中央揃えされていますが、行に関連して、ヘッダーではありません。

ヘッダのすべてを垂直に配置するには、高さをパディングに置き換えることができます。

.header { 
    padding: 15px 0; 
}

また、テキストに余白を付けることもできます。

.txt { 
    margin-top: 10px; 
}

出典

2016-12-22 21:25:46 sol

ありがとうございます。私はブートストラップが初めてののでダブルチェックしてください。私のブートストラップのレイアウトは正しいと思いますか？ –

同時に縦横の位置合わせができない

答えて

関連する問題