CSS float right and vertically center an element - html

Question

I am trying to push the sign out button to the right but have it aligned vertically in the centre.
Here is an example:
#sessionManageWrapper {
max-width: 45%;
}
#sessionManageWrapper .sessionBox:not(:last-child) {
margin-bottom: 5px;
}
.sessionBox {
background-color: #444343;
padding: 4px;
border-radius: 3px;
border: 2px solid grey;
vertical-align: middle;
}
.sessionBox img {
vertical-align: middle;
height: 32px;
width: 32px;
}
.logoutSessWrapper {
float: right;
line-height: 15px;
}
.sessionBox p {
margin: 0;
vertical-align: middle;
display: inline-block;
}
.sessionBox p:not(:last-child) {
margin-right: 10px;
}
.sessionSeparator {
background-color: grey;
width: 1px;
height: 24px;
display: inline-block;
vertical-align: middle;
}
.activeCircle {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid #ccc;
width: 8px;
height: 8px;
display: inline-block;
vertical-align: middle;
}
.sessionActiveGreen {
background-color: green;
}
.redButton {
-moz-box-shadow: inset 0px 1px 0px 0px #cf866c;
-webkit-box-shadow: inset 0px 1px 0px 0px #cf866c;
box-shadow: inset 0px 1px 0px 0px #cf866c;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
background: -moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: -webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: -o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: -ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315', GradientType=0);
background-color: #d0451b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #942911;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-size: 13px;
padding: 6px 19px;
text-decoration: none;
text-shadow: 0px 1px 0px #854629;
}
.redButton:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b));
background: -moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background: -webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background: -o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background: -ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background: linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b', GradientType=0);
background-color: #bc3315;
}
.redButton:active {
position: relative;
top: 1px;
}
<div id="sessionManageWrapper">
<div class="sessionBox activeSession">
<div class="activeCircle sessionActiveGreen" title="Online, active"></div>
<img src="http://i.imgur.com/k0h3WPJ.png">
<div class="sessionSeparator"> </div>
<p>#currentSessLocation</p>
<p>#currentSessDevice</p>
<p>#currentSessIP</p>
<div class="logoutSessWrapper">Sign Out</div>
</div>
</div>
I know vertically align does not work with float but I can't seem to find a way to get that sign out button centre like the rest of the elements in the session box div.

Answer 1

Just use absolute positioning. It's a simple method to vertically center and right-align the button.
.sessionBox {
background-color: #444343;
padding: 4px;
border-radius: 3px;
border: 2px solid grey;
vertical-align: middle;
position: relative; /* NEW; set nearest positioned ancestor for abspos child */
}
.logoutSessWrapper {
/* float: right; */
line-height: 15px;
position: absolute; /* NEW */
right: 5px; /* NEW */
top: 50%; /* NEW */
transform: translateY(-50%); /* NEW */
}
#sessionManageWrapper {
max-width: 45%;
}
#sessionManageWrapper .sessionBox:not(:last-child) {
margin-bottom: 5px;
}
.sessionBox {
background-color: #444343;
padding: 4px;
border-radius: 3px;
border: 2px solid grey;
vertical-align: middle;
position: relative; /* NEW; set nearest positioned ancestor for abspos child */
}
.sessionBox img {
vertical-align: middle;
height: 32px;
width: 32px;
}
.logoutSessWrapper {
/* float: right; */
line-height: 15px;
position: absolute; /* NEW */
right: 5px; /* NEW */
top: 50%; /* NEW */
transform: translateY(-50%); /* NEW */
}
.sessionBox p {
margin: 0;
vertical-align: middle;
display: inline-block;
}
.sessionBox p:not(:last-child) {
margin-right: 10px;
}
.sessionSeparator {
background-color: grey;
width: 1px;
height: 24px;
display: inline-block;
vertical-align: middle;
}
.activeCircle {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: 1px solid #ccc;
width: 8px;
height: 8px;
display: inline-block;
vertical-align: middle;
}
.sessionActiveGreen {
background-color: green;
}
.redButton {
-moz-box-shadow: inset 0px 1px 0px 0px #cf866c;
-webkit-box-shadow: inset 0px 1px 0px 0px #cf866c;
box-shadow: inset 0px 1px 0px 0px #cf866c;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
background: -moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: -webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: -o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: -ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
background: linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315', GradientType=0);
background-color: #d0451b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #942911;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-size: 13px;
padding: 6px 19px;
text-decoration: none;
text-shadow: 0px 1px 0px #854629;
}
.redButton:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b));
background: -moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background: -webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background: -o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background: -ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
background: linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b', GradientType=0);
background-color: #bc3315;
}
.redButton:active {
position: relative;
top: 1px;
}
<div id="sessionManageWrapper">
<div class="sessionBox activeSession">
<div class="activeCircle sessionActiveGreen" title="Online, active"></div>
<img src="http://i.imgur.com/k0h3WPJ.png">
<div class="sessionSeparator"> </div>
<p>#currentSessLocation</p>
<p>#currentSessDevice</p>
<p>#currentSessIP</p>
<div class="logoutSessWrapper">Sign Out</div>
</div>
</div>
jsFiddle
For a complete explanation of how this centering method works see:
Element will not stay centered, especially when re-sizing screen

Answer 2

As far as i understood what you are trying to achieve, i edited your code, and added few divs and few css classes, and it works perfectly, here it is:
HTML
<div id="sessionManageWrapper">
<div class="sessionBox activeSession">
<div class="activeCircle sessionActiveGreen" title="Online, active"></div>
<img src="http://i.imgur.com/k0h3WPJ.png">
<div class="sessionSeparator"> </div>
<p>#currentSessLocation</p>
<p>#currentSessDevice</p>
<p>#currentSessIP</p>
<!-- additional Markup -->
<div class="wrap">
<div class="dt">
<div class="dc">
<div class="logoutSessWrapper">Sign Out</div>
</div>
</div>
</div>
</div> <!-- wrap ends -->
</div>
ADDITIONAL CSS
#sessionManageWrapper {
max-width: 45%;
position: relative;
}
.dt {
display: table;
width: 100%;
height: 100%;
}
.wrap {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.dc {
display: table-cell;
vertical-align: middle;
}
Here is a fiddle of it