センタリングインラインブロックのdiv要素

Question

私はcontact-section-leftが親divにセンタリングしていない問題に遭遇しています。これはvertical-align: topの問題ではありません。 border-right白線は、contact-section-left divの高さがどの程度伸びているかを示していますが、画像の右側と同じサイズになります（この例では画像がありません）。

私はここに間違ったアプローチをしようとしているのかどうか分かりませんが、私は下に作ったペイントイメージのように見せたいと思っています。

アイデア？左/右セクションの親にdisplay: flex; align-items: center;をAssiging

.total-center { 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 
#contact-section { 
 
\t width: 100%; 
 
\t background: #00a16d; 
 
} 
 
#contact-section-wrap { 
 
\t padding: 2%; 
 
} 
 
#contact-section-left, #contact-section-right { 
 
\t height: 100%; 
 
\t display: inline-block; 
 
\t color: #FFF; 
 
\t font-size: 1.5em; 
 
\t padding: 1% 0; 
 
\t position: relative; 
 
} 
 
#contact-section-left { 
 
\t width: 60%; 
 
\t border-right: 1px solid #FFF; 
 
\t font-style: italic; 
 
} 
 
#contact-section-right { 
 
\t width: 30%; 
 
\t text-align: center; 
 
} 
 
#contact-img { 
 
\t background-image: url("../icons/envelope.png"); 
 
\t background-repeat: no-repeat; 
 
\t background-size: auto; 
 
\t margin: 0 auto; 
 
\t display: block; 
 
\t width: 128px; 
 
\t height: 128px; 
 
\t position: relative; 
 
} 
 
#contact-width { 
 
\t width: 200%; 
 
\t font-size: 2em; 
 
} 
 
.total-width { 
 
\t width: 100%; 
 
}

<div id="contact-section"> 
 
\t \t <div id="contact-section-wrap"> 
 
\t \t \t <div id="contact-section-left"> 
 
\t \t \t \t <div class="total-center total-width">Tell us more about your project.</div> 
 
\t \t \t </div><div id="contact-section-right"> 
 
\t \t \t \t <div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

Answer 1

コード全体を次のように簡略化することができます。私はその間の垂直線に擬似要素を使用し、flexboxを介してorderで位置をシフトします。

jsFiddle

#contact-section { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    color: #FFF; 
 
    background: #00a16d; 
 
    padding: 1em 2em; 
 
} 
 

 
#contact-section:before { 
 
    content: ""; 
 
    flex: 0 0 1px; 
 
    height: 2em; 
 
    background: #fff; 
 
    order: 2; 
 
} 
 

 
#contact-section-left { 
 
    font-size: 1.5em; 
 
    order: 1; 
 
    font-style: italic; 
 
} 
 

 
#contact-section-right { 
 
    background: url("https://i.imgur.com/cLMHUZE.png") center/contain no-repeat; 
 
    font-size: 2em; 
 
    order: 3; 
 
    padding: .5em 0; 
 
}

<div id="contact-section"> 
 
    <div id="contact-section-left">Tell us more about your project.</div> 
 
    <div id="contact-section-right">Contact us</div> 
 
</div>

Answer 2

それらを並べて表示し、垂直にそれらを中心に説明します。次に、左（短い）要素から右（背の高い）要素の境界線の右に境界線右を移動すると、線はあなたが望むように見えるはずです。

.total-center { 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 
#contact-section { 
 
\t width: 100%; 
 
\t background: #00a16d; 
 
} 
 
#contact-section-wrap { 
 
\t padding: 2%; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
#contact-section-left, #contact-section-right { 
 
\t height: 100%; 
 
\t display: inline-block; 
 
\t color: #FFF; 
 
\t font-size: 1.5em; 
 
\t padding: 1% 0; 
 
\t position: relative; 
 
} 
 
#contact-section-left { 
 
\t width: 60%; 
 
\t font-style: italic; 
 
} 
 
#contact-section-right { 
 
\t width: 30%; 
 
\t text-align: center; 
 
    border-left: 1px solid #FFF; 
 
} 
 
#contact-img { 
 
\t background-image: url("../icons/envelope.png"); 
 
\t background-repeat: no-repeat; 
 
\t background-size: auto; 
 
\t margin: 0 auto; 
 
\t display: block; 
 
\t width: 128px; 
 
\t height: 128px; 
 
\t position: relative; 
 
} 
 
#contact-width { 
 
\t width: 200%; 
 
\t font-size: 2em; 
 
} 
 
.total-width { 
 
\t width: 100%; 
 
}

<div id="contact-section"> 
 
\t \t <div id="contact-section-wrap"> 
 
\t \t \t <div id="contact-section-left"> 
 
\t \t \t \t <div class="total-center total-width">Tell us more about your project.</div> 
 
\t \t \t </div><div id="contact-section-right"> 
 
\t \t \t \t <div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

Answer 3

あなた#contact-section-wrapは、高さを持っていません。あなたが設定しているheight: 100%は本当に何もしていません。彼らは依然として親の身長に依存して、彼らが100％を得ていることを知っている。

#contact-section-wrapに身長を設定してみてください。