如何在不影响内联块的垂直对齐的情况下向右浮动？

Question

I have a challenge, and would like to know the cleanest solution with the minimal effort custom side as I am using Bootstrap (and trying to solve without hardcoded values as I would like to use it as component with Angular...).

Below there is the code, but basically I have the problem on title. Two children, one is text and the other a div containing buttons which I would like to move to the right horizontally. Unfortunately, when I do that, then the text supposed to stay to the left is loosing the vertical alignment.

Here the code, where I would like to have Button in the middle:

 .pi-button-with-buttons{ width: 100%; height: 50px !important; text-align: left !important; } .pi-button-with-buttons span { vertical-align: middle; } .pi-button-with-buttons div { display: inline-block; float:right; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="btn btn-default pi-button-with-buttons"> <span>Button</span> <div> <a class="btn btn-default" role="button">Inside 1</a> <a class="btn btn-default" role="button">Inside 2</a> </div> </div> 

Thanks in advance for your help!

Answer 1

Option 1 : using flexbox

 .pi-button-with-buttons{ width: 100%; height: 50px !important; text-align: left !important; } .pi-button-with-buttons span { display: inline-flex; align-items: center; height: 100%; } .pi-button-with-buttons div { display: inline-block; float:right; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="btn btn-default pi-button-with-buttons"> <span>Button</span> <div> <a class="btn btn-default" role="button">Inside 1</a> <a class="btn btn-default" role="button">Inside 2</a> </div> </div> 

Option 2 : using line-height

 .pi-button-with-buttons { width: 100%; height: 50px !important; text-align: left !important; } .pi-button-with-buttons span { line-height: 36px; } .pi-button-with-buttons div { display: inline-block; float: right; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="btn btn-default pi-button-with-buttons"> <span>Button</span> <div> <a class="btn btn-default" role="button">Inside 1</a> <a class="btn btn-default" role="button">Inside 2</a> </div> </div> 

Answer 2

Yes, unfortunately float: right loses the display: inline-block behaviour. Instead, remove the float: right and use flexbox on the wrapper, like so:

.btn-default {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

Answer 3

You can simply use flex like this :

 .pi-button-with-buttons{ width: 100%; height: 50px !important; display:flex!important; align-items:center; } .pi-button-with-buttons div { flex:1; text-align:right; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="btn btn-default pi-button-with-buttons"> <span>Button</span> <div> <a class="btn btn-default" role="button">Inside 1</a> <a class="btn btn-default" role="button">Inside 2</a> </div> </div>