CODEWITHSUNDEEP
htmlcsscss-floatcss-position
Erdss4
Erdss4

Reputation: 1125

CSS float right and vertically center an element

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.

Upvotes: 1

Views: 4016

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 370993

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:

Upvotes: 1

Talha Abrar
Talha Abrar

Reputation: 882

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

Upvotes: 1

Related Questions