css中右浮动,CSS向右和垂直中心浮动一个元素

只需使用绝对定位。这是一种垂直居中和右对齐按钮的简单方法。

.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;

}

@currentSessLocation

@currentSessDevice

@currentSessIP

Sign Out

有关此居中方法如何工作的完整说明，请参阅：