Float: the right CSS property vertically changes the center position of the button inside the div
The element <button>
in the following code is vertically centered if not right-aligned using the CSS property float:right
.
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 violin is here .
How can I make the button right and vertical?
+3
source to share
2 answers
The best thing for me is to use the technique display: table
(as I answer in the 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>
+5
source to share
Place your button in the div, add line-height
, and float: right
in this 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>
+1
source to share