divを中心としたdivと左の境界線を持つdivのテキスト

Question

申し訳ありませんが、私は投稿のタイトルを説明する方法を知らなかった。 私は、HTML/CSSを使用したスクリーンショットのような何かを達成したいと思います：

それはつもりは私の列のタイトル/ヘッダのいくつかの種類もあります。 ABCを青い枠で縦と横の中央に配置したいと思います。また、赤い点（小さなimgを置いて欲しい）を垂直にセンタリングし、画像の右側に1px太い灰色の線があるはずです。 どうすればいいですか？

私はこのような何かを試してみたが、ラインが短すぎる

：

<div style="background: #75d0ff;"> 

    <div style="border-right: 1px solid gray; padding: 20px; display: inline; height: 100%;"> 
     <img src="css/img/dot.png"> 
    </div> 

    <div class="border-content" style="display: inline"> 
     <p class="text-center">ABC</p> 
    </div> 
</div> 

Answer 1

私はこれが正しい方法だと思う：

#container { 
 
    position: relative; 
 
    text-align: center; 
 
    height:50px; 
 
    background-color: #67CDFB; 
 
    width: 200px; 
 
} 
 

 
#textPusher { 
 
    width: 100%; 
 
    height:35%; 
 
} 
 
#imgContainer{ 
 
    width: 20%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top:0; 
 
    border-right:1px solid red; 
 
} 
 

 
#imgContainer img{ 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 10px; 
 
    width:calc(100% - 20px); 
 
    height: calc(100% - 20px); 
 

 
}

<div id="container"> 
 
    
 
    <div id="textPusher"></div> 
 
    <div id="textContainer">abc</div> 
 
    <div id="imgContainer"><img src="http://lorempixel.com/400/200/" alt=""></div> 
 
    
 
    
 
    
 
</div>

Answer 2

 #container 
 
     { 
 
     width:200px; 
 
     height:40px; 
 
     background-color:#75d0ff; 
 
     text-align:center; 
 
     font-family:arial; 
 
     } 
 

 
     #container-circle 
 
     { 
 
     padding-left:10px; 
 
     padding-top:10px; 
 
     position:absolute; 
 
     width: 40px; 
 
     height: 30px; 
 
     margin-right:5px; 
 
     border-right:2px solid orange; 
 
     } 
 

 
     #circle 
 
     { 
 

 
     top:15px; 
 

 
     width: 20px; 
 
     height: 20px; 
 
     border-radius: 50%; 
 
     border:2px solid red 
 

 
     } 
 
     #tekst 
 
     { 
 
     padding-top:10px; 
 
     width:200px; 
 
     height:40px; 
 
     font-size:20px; 
 
     font-weight:bold; 
 
     }

<div id="container"> 
 
     <div id="container-circle"> 
 
     <div id="circle"> 
 

 
     </div> 
 
     </div> 
 
     <div id="tekst"> 
 
     ABC 
 
     </div> 
 
    </div>