CODEWITHSUNDEEP
htmlcss
user3626048
user3626048

Reputation: 736

Text centered in div with another div on left with right border

Sorry but I didn't know how to describe post title. I would like to achieve something like in screenshot using html/css:

screen

It's gonna be some kind of title/header for my columns. I would like ABC be centered vertically and horizontally in blue border. Also red dot (I want to put there small img) should be centered vertically and there should be 1px thick gray line on right side of image. How to do that?

I've tried something like this but line is too short:

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

Upvotes: 0

Views: 84

Answers (2)

Sven van den Boogaart
Sven van den Boogaart

Reputation: 12325

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

Upvotes: 1

Moses Schwartz
Moses Schwartz

Reputation: 3027

I think this would be the right way:

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

Upvotes: 1

Related Questions