CSS float right and vertically center an element

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">&nbsp;</div>

    <p>@currentSessLocation</p>

    <p>@currentSessDevice</p>

    <p>@currentSessIP</p>

    <div class="logoutSessWrapper"><a href="" class="redButton">Sign Out</a></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.

score 1 · Answer 1 · answered Jul 02 '17 at 00:04

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">&nbsp;</div>
    <p>@currentSessLocation</p>
    <p>@currentSessDevice</p>
    <p>@currentSessIP</p>

    <!-- additional Markup  -->

    <div class="wrap">
      <div class="dt">
        <div class="dc">
          <div class="logoutSessWrapper"><a href="" class="redButton">Sign Out</a></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

This does work when a sessionBox is on its own but when it is with more or even other elements the sign out button gets pushed down, this is what happens when I try your code: http://i.imgur.com/STgHoTo.png The sign out button is meant to be part of the first session box. — Erdss4, Jul 02 '17 at 00:48
could you please update you html snippet? so that i can look at it and alter my solution — Talha Abrar, Jul 02 '17 at 02:01

score 1 · Accepted Answer · answered Jul 02 '17 at 03:32

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">&nbsp;</div>

    <p>@currentSessLocation</p>

    <p>@currentSessDevice</p>

    <p>@currentSessIP</p>

    <div class="logoutSessWrapper"><a href="" class="redButton">Sign Out</a></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

CSS float right and vertically center an element

2 Answers2

jsFiddle