以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
      {
        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>

Answer 2

我认为这是正确的方法：

#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>