Question

我对如何在div内部垂直文本居中感到困惑，div内部有两个div（第一个：文本，第二个：带浮动的按钮）

没有任何多行可以做到吗？ https://jsfiddle.net/jr9yx3kx/

HTML

<div class="alert alert-success">
  <span>Information box lorem ipsum</span>
  <a href="" class="btn btn-solid">Why is it not correct?</a>
  <div class="clearfix"></div>
</div>

CSS

.alert {
    padding: 17px;
    margin-bottom: 2rem;
    border: 1px solid transparent;
    font-size: 12px;
    border-radius: 0.215rem;
    background: #ccc;
    color: #fff;
}
.alert a.btn {
  float: right;
}
.btn {
  padding: 0.429rem 0.929rem;
    font-size: 0.858rem;
    border-radius: 0.143rem;
    font-weight: 400;
    line-height: 1.57142857;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background: blue;
    color: #fff;
}
.clearfix {
  clear: both;
}

Answer 1

您可以使用常用方法进行垂直居中，为容器position: relative和span设置这些设置：

.alert span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这是一个片段：

＆＃13;

.alert {
  padding: 17px;
  margin-bottom: 2rem;
  border: 1px solid transparent;
  font-size: 12px;
  border-radius: 0.215rem;
  background: #ccc;
  color: #fff;
  position: relative;
}

.alert span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.alert a.btn {
  float: right;
}

.btn {
  padding: 0.429rem 0.929rem;
  font-size: 0.858rem;
  border-radius: 0.143rem;
  font-weight: 400;
  line-height: 1.57142857;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background: blue;
  color: #fff;
}

.clearfix {
  clear: both;
}

＆＃13;

<div class="alert alert-success">
  <span>Information box lorem ipsum</span>
  <a href="" class="btn btn-solid">Why is it not correct?</a>
  <div class="clearfix"></div>
</div>

＆＃13;

Answer 2

我认为您希望跨度在灰色框中居中，按钮位于文本下方，但是浮动到右侧？

如果是这样，请为span添加一些CSS：

span {
    text-align:center;
    width:100%;
    display:block;
}

https://jsfiddle.net/jr9yx3kx/1/

当你有另一个带浮动的div时，如何居中文本

2 个答案: