CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Micky
Micky

Reputation: 737

How to float right without affecting the vertical alignment of a inline-block?

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!

Upvotes: 0

Views: 45

Answers (3)

delinear
delinear

Reputation: 2795

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

Upvotes: 1

sol
sol

Reputation: 22919

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>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 272590

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>

Upvotes: 1

Related Questions