クロスブラウザの垂直センタリング3つのアイテムの水平方向のサイズ変更アライメント

私は、コンテンツの3つの列を特徴とする簡単な自己完結型の反応性の高いページを作成しようとしています。中央のものはフルハイトのイメージを持ち、外側のものは基本的なhtmlコンテンツ（テキストの段落と1つのイメージ）を持っています。外側の列の内容は、可視ウィンドウ内で垂直に中央に配置する必要があります。クロスブラウザの垂直センタリング3つのアイテムの水平方向のサイズ変更アライメント

このコードは、外側の（左端と右端の）divの内容を垂直方向にセンタリングすることを除いて、必要なすべてを行います。基本的には、コンテンツは一番上に固定されたままです...提案（任意の実際のコードで、私は初心者です）？ありがとう！私が作った

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>title</title> 
<style> 
.wrapper{ 
    width: 100%; 
    height: 99vh; 
    margin: 0 auto; 
    display: flex; 
    flex-wrap: nowrap; 
-webkit-flex-direction: row; 
    flex-direction: row; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
} 

.wrap-item{ 
    width: 33%; 
    height: 100%; 
    display: inline-block;  
} 

.wrap-img{ 
    width: 33%; 
    height: 100vh;  
} 

#im { 
    background-image: url("url"); 
    background-repeat: no-repeat; 
    background-size: contain; 
} 
.auto-style1 { 
    border-width: 0px; 
} 
</style>  
</head>  
<body>  
    <div class="wrapper"> 
     <div class="wrap-item" style="vertical-align:middle">     
      <p>content </p>  
     </div> 
     <div class="wrap-item" id="im"></div> 
     <div class="wrap-item" style="vertical-align:middle">    
      <p>content</p> 
     </div> 
    </div>  
</body> 
</html>

出典

2016-10-21 Marta

変更はdiv#imに、クラスの代わりに.wrap-itemの.wrap-imgを与えることでした。また、プロパティheight:100%を.wrap-itemから削除したので、ラップアイテムのdivはその内容と同じだけの高さになります。

注：#imに赤い背景が表示されています。

.wrapper{ 
 
    width: 100%; 
 
    height: 99vh; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
-webkit-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    -webkit-justify-content: center; 
 
    justify-content: center; 
 
} 
 

 
.wrap-item{ 
 
    width: 33%; 
 
    display: inline-block;  
 
} 
 

 
.wrap-img{ 
 
    width: 33%; 
 
    height: 100vh; 
 
    display:inline-block; 
 
} 
 

 
#im { 
 
    background-image: url("url"); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background:#f00; 
 
} 
 
.auto-style1 { 
 
    border-width: 0px; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
 
<title>title</title>  
 
</head>  
 
<body>  
 
    <div class="wrapper"> 
 
     <div class="wrap-item" style="vertical-align:middle"> 
 
      <p>content</p>  
 
     </div> 
 
     <div class="wrap-img" id="im"> 
 
     </div> 
 
     <div class="wrap-item" style="vertical-align:middle">  
 
      <p>content</p> 
 
     </div> 
 
    </div>  
 
</body> 
 
</html>

出典

2016-10-24 17:25:29 Carp

クロスブラウザの垂直センタリング3つのアイテムの水平方向のサイズ変更アライメント

答えて

関連する問題