CODEWITHSUNDEEP
htmlcss
Simon
Simon

Reputation: 2538

Div with 2 images and a separator

I'm trying to design a button/div that looks like this:

enter image description here

I've gotten pretty far, but I'm unsure how to align it correctly and add the line separator...

This is my code:

.inflateBtn {
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-sizing: border-box;
  border-radius: 4px;
  display: inline-block;
  padding: 16px 34px;
  border-bottom: 3px solid #ccc;
}

.inflateIcon {
  display: inline-block;
  margin-right: 16px;
}

.inflateBtn svg {
  stroke: #CCCCCC;
  vertical-align: middle;
}

.brandLogo {
  width: 100px;
  display: inline-block;
  margin-left: 12px;
}

.brandLogo img {
  vertical-align: middle;
  width: 100px;
}
  <div class="inflateBtn">
    <div class="inflateIcon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wind"><path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"></path></svg>
    </div>
    <div class="brandLogo">
      <img src="https://i.imgur.com/Cjfxurc.png" />
    </div>
  </div>

Upvotes: 1

Views: 177

Answers (2)

Shubham Jain
Shubham Jain

Reputation: 930

You can use flex to align all of your items easily. Below is the code which does the same.

.inflateBtn {
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 3px solid #ccc;
  height: 60px;
  width: 200px;
}

.inflateIcon {
  margin-right: 16px;
}

.inflateBtn svg {
  stroke: #CCCCCC;
}

.brandLogo {
  width: 100px;
  margin-left: 12px;
}

.brandLogo img {
  width: 100px;
}

.separator {
  border-right: 1px solid #ccc;
  height: 100%;
}
<div class="inflateBtn">
    <div class="inflateIcon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wind"><path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"></path></svg>
    </div>
    <div class="separator"></div>
    <div class="brandLogo">
      <img src="https://i.imgur.com/Cjfxurc.png" />
    </div>
</div>

Upvotes: 1

ZorgoZ
ZorgoZ

Reputation: 3569

It is not exact, you will have to play around with the numbers, but the idea is not to use margins on the inner two divs, but to use paddings. This way, the inner divs are aligned with the outer one, thus you can add a border.

.inflateBtn {
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  box-sizing: border-box;
  border-radius: 4px;
  display: inline-block;
  padding: 0;
  border-bottom: 3px solid #ccc;
}

.inflateIcon {
  display: inline-block;
  padding: 16px;
  border-right: 1px solid #ccc;
}

.inflateBtn svg {
  stroke: #CCCCCC;
  vertical-align: middle;
}

.brandLogo {
  width: 100px;
  display: inline-block;
  padding: 12px 34px 12px 12px;
}

.brandLogo img {
  vertical-align: middle;
  width: 100px;
}
  <div class="inflateBtn">
    <div class="inflateIcon">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-wind"><path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"></path></svg>
    </div>
    <div class="brandLogo">
      <img src="https://i.imgur.com/Cjfxurc.png" />
    </div>
  </div>

Upvotes: 1

Related Questions