CODEWITHSUNDEEP
css
Talespin_Kit
Talespin_Kit

Reputation: 21877

float:right CSS property changes the vertically center position of the button inside div

The <button> element in the following code is vertically centered, when it is not right aligned using the CSS float:right property.

HTML

<div class="opponents_list"><b class="opponent_list_bold_name">bob</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri2</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">kaleeem</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nehaaa</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nitiisha</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">rangi</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">tom</b>
    <button class="opponent_list_button" type="button">Invite</button>
</div>

CSS

.opponents_list {
    width: 100vw;
    height: 3em;
    margin: 0.1em auto;
    background: #333;
}
.opponent_list_bold_name {
    line-height: 3em;
}
.opponent_list_button {
    float: right;
}

The fiddle is here.
How can I make the button both right aligned and vertical center?

Upvotes: 4

Views: 984

Answers (2)

vaso123
vaso123

Reputation: 12391

Put your button into a div, add line-height and float: right to that div. Here is a JSFiddle

<div class="opponents_list">
    <b class="opponent_list_bold_name">bob</b>
    <div style="line-height: 3em; float: right;">
        <button class="opponent_list_button" type="button">Invite</button>
    </div>
</div>

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

For me the best solution is to use display: table technique(as i answer in your previous question):

#playerlist {
  display: table;
  width: 100%;
}
.opponents_list {
  height: 3em;
  margin: 0.1em auto;
  background: #666;
  vertical-align: middle;
  display: table-row;
}
.opponent_list_bold_name {
  vertical-align: middle;
  display: table-cell;
  width: 100%;
}
.tableCell {
  display: table-cell;
  vertical-align: middle;
}
<div class="opponents_list"><b class="opponent_list_bold_name">bob</b>

  <div class="tableCell">
    <button class="opponent_list_button" type="button">Invite</button>
  </div>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri</b>

  <div class="tableCell">
    <button class="opponent_list_button" type="button">Invite</button>
  </div>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">harri2</b>

  <div class="tableCell">
    <button class="opponent_list_button" type="button">Invite</button>
  </div>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">kaleeem</b>

  <div class="tableCell">
    <button class="opponent_list_button" type="button">Invite</button>
  </div>
</div>
<div class="opponents_list"><b class="opponent_list_bold_name">nehaaa</b>

  <div class="tableCell">
    <button class="opponent_list_button" type="button">Invite</button>
  </div>
</div>

Upvotes: 5

Related Questions