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

Question

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?

score 5 · Accepted Answer · answered Dec 10 '14 at 16:09

5

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>

answered Dec 10 '14 at 16:09

Alex Char

32,879
9
49
70

The margin is not displayed. Even setting it to higher value has no effect – Talespin_Kit Dec 10 '14 at 16:27
[The margin property] applies to all elements except elements with table display types other than table-caption, table and inline-table from [MDN](http://stackoverflow.com/questions/16398823/why-is-a-div-with-display-table-cell-not-affected-by-margin).Consider using the border-spacing property instead. Note it should be applied to a parent element with a display:table layout and border-collapse:separate. – Alex Char Dec 10 '14 at 16:30
Thank you very much. What kind of approach you would have taken to display the online player names as list and to invite them(a right aligned button) considering the webpage is to be displayed on mobile device ?. Just want to make sure i am not doing anything stupid as html is new to me. – Talespin_Kit Dec 10 '14 at 16:36
With that approach you won't have any problem. You can also check it on chrome mobile view. – Alex Char Dec 10 '14 at 16:40
In the fiddle http://jsfiddle.net/m74nkkym/ there is a space b/w the invite button and the name. That is not desired. – Talespin_Kit Dec 10 '14 at 16:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/66593/discussion-between-alex-char-and-talespin-kit). – Alex Char Dec 10 '14 at 16:43

score 1 · Answer 2 · answered Dec 10 '14 at 16:09

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>

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

HTML

CSS

2 Answers2