RudziankoŇ≠ RudziankoŇ≠ - 2 months ago 5x
CSS Question

HTML: Position element by the center of sibling

Sorry for a dump question. I have never work with HTML.
I have following UI:

enter image description here

I would like to be

centralized by the middle of

<div style="position: relative; overflow: hidden;">
<div style="position: relative; width: 40%; float: left; vertical-align:middle">
<button class="btn btn-default">sendMessage</button>
<div style="position: relative; width: 40%; float: right; vertical-align:middle">
<span class="label label-success" style="font-size: small;">Success</span>

What am I doing wrong?


Try display: inline-block with vertical-align: middle like that:

.send-button {
  display: inline-block;
  border: solid 1px black;
  background: #ccc;
  margin: 8px;
  padding: 8px;
  vertical-align: middle;

.success-info {
  display: inline-block;
  background: #9b8;
  color: white;
  vertical-align: middle;
  padding: 2px;
  font-weight: bold;
<div class="parent">
  <button class="send-button">Send Message</button>
  <div class="success-info">Success!</div>