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

时间：2017-07-01 23:41:09

标签： html css css-float css-position

我正在尝试将符号按钮向右推，但让它在中心垂直对齐。

以下是一个例子：

#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>

我知道垂直对齐不适用于浮点数，但我似乎无法找到一种方法来获取按钮中心，就像会话框div中的其余元素一样。

2 个答案:

答案 0 :(得分：1)

据我了解你想要实现的目标，我编辑了你的代码，添加了几个div和几个css类，它运行得很好，这里是：

<强> 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>

其他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;
}

以下是fiddle

答案 1 :(得分：1)

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

.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

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

相关问题
最新问题