How to vertically center a floating element

Question

* {
  margin: 0px;
}
.container {
  background: #ccc;
  line-height: 50px;
  verticle-algn: middle;
  clear: both;
}
.float {
  overflow: hidden;
  float: right;
}

<div class="container">
  <button class="inside">inside</button>
  <button class="float">float</button>
</div>

Please check this example.I want the .float element to be vertically centered of the .container element as the .inside element.But no matter I trigger BFC or add a pseudo element, I can not clear the impact of the float element.I don't think margin is a best way to solve this.Can you tell me how to fix it, thanks for your help.

first get rid of float and check the duplicate for better way to place your element and align them — Temani Afif, Nov 11 '19 at 08:17

score 0 · Answer 1 · answered Nov 11 '19 at 04:36

Try this its work what you expected.

* {
margin: 0px;
}
.container{
display:flex;
justify-content: space-between;
background: #ccc;
line-height: 50px;
}
.float{
margin: 0 auto;
}

<div class="container">
<div class="inside"><button>inside</button></div>
<div class="float"><button>float</button></div>
</div>

How to vertically center a floating element

1 Answers1