html - 文本在 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>