文本以 div 为中心，左侧有另一个 div，右边框

Question

抱歉，我不知道如何描述帖子标题。 我想使用 html/css 在屏幕截图中实现类似的效果：

这将是我的专栏的某种标题/标题。 我希望 ABC 在蓝色边框中垂直和水平居中。此外，红点（我想放在那里的小图像）应该垂直居中，并且图像右侧应该有 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>