垂直中心h2とサブ見出し

Question

私はウェブサイト上で作業しており、イメージを含むdivに関して、h2とサブ見出しをどのように垂直に配置できるかを見たいと思っていました。

基本的には、display: flexとflex-direction: columnのコンテナがあります。私には3つのコラムがあります。

最初の列には、プロファイルイメージとヘッダーおよびサブヘッダーが含まれています。 .title divを垂直に配置するにはどうすればよいですか？ここで

は-50％変換して、位置、絶対に使用してみてくださいjsfiddle

Answer 1

はその後、あなたはそれが以下のように中央を縦にするために、子プロフィール画像とタイトルクラスだ揃えることができ、クラスprofile-containerにdisplay: flexを与える：

.profile-container{ 
display : flex; 
align-items : center; 
height : 200px; //provide wrapper height 
} 

これはあなたの要件を達成するはずです。

Answer 2

へのリンクです。参照用

@import url('https://fonts.googleapis.com/css?family=Lato'); 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-color: #fafafa; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100%; 
 
} 
 

 
.container { 
 
    background: white; 
 
    width: 1000px; 
 
    height: 600px; 
 
    border: 1px solid rgba(0, 0, 0, .09); 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04); 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 

 
/*set up vertical column layouts for the three containers*/ 
 

 
.profile-container, 
 
.work-container, 
 
.social-media-container { 
 
    flex: 1; 
 
    padding: 1.5rem; 
 
} 
 

 
.profile-container { 
 
    align-self: center; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 

 
.profile-image { 
 
    display: inline-block; 
 
    background-image: url('https://organicthemes.com/demo/profile/files/2012/12/profile_img.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: 0px 0px; 
 
    background-size: 100%; 
 
    height: 200px; 
 
    width: 200px; 
 
    border-radius: 50%; 
 
} 
 

 
.title { 
 
    display: inline-block; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    padding-left: 25px; 
 
} 
 

 
.header-name { 
 
    font-family: 'Lato', sans-serif; 
 
    display: inline-block; 
 
    margin: 0px; 
 
}

 <div class="container"> 
 

 
     <div class="profile-container"> 
 
      <div class="profile-image"></div> 
 
      <div class="title"> 
 
      <h2>Tarang Hirani</h2> 
 
      <h6>Software Engineer</h6> 
 
      </div> 
 
     </div> 
 

 
     <div class="work-container"> 
 
      These are my projects 
 
     </div> 
 

 
     <div class="social-media-container"> 
 
      Social media link 
 
     </div> 
 
     </div>

リンク：https://jsfiddle.net/kzj4omo8/3/