Question

我希望将div1内部元素保持垂直居中。

正如您在div1 display中看到的那样，如果我使用display: table-cell，它会垂直对齐元素，但元素会移到顶部而不是居中。

但是如果我使用display: flex，它会使元素保持居中，但元素会水平对齐。

＆＃13;

.div1 {
  height: 200px;
  width: 100px;
  background: white;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  display: table-cell;
}

.span1 {
  text-align: center;
  font-size: 22px;
  color: #111;
  display: table-cell;
  vertical-align: middle;
  word-spacing: 100px;
  font-weight: 600;
  max-height: 120px;
  dispaly: block;
  overflow: hidden;
}

.underline {
  position: relative;
  height: 20px;
  width: 100%;
  background: black;
}

＆＃13;

<div class="div1">
  <span class="span1">God Bless us all.</span>
  <div class="underline"></div>
</div>

＆＃13;

Jsfiddle：https://jsfiddle.net/c15dmfws/

Answer 1

你有很多不必要的代码。我清理了一下。

.div1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 100px;
  background: whitesmoke;
}

.span1 {
  text-align: center;
  font-size: 22px;
  color: #111;
  word-spacing: 100px;
  font-weight: 600;
  max-height: 120px;
}

.underline {
  height: 20px;
  width: 100%;
  background: black;
}

<div class="div1">
  <span class="span1">God Bless us all.</span>
  <div class="underline"></div>
</div>

jsFiddle

Answer 2

更新了代码段

.div1{
  height:200px;
  width:100px;
  background:white;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  display: table-cell;
}

.span1{
    text-align: center;
    font-size: 22px;
    color: #111;
    display: table-cell;
    vertical-align: middle;
    word-spacing: 100px;
    font-weight: 600;
    max-height: 120px;
    dispaly: block;
    overflow: hidden;
}
.underline{
    position: relative;
    height: 20px;
    width: 100%;
    background: black;
}

<div class="div1">
  <span class="span1">God Bless us all.</span>
  <div class="underline"></div>
</div>

Answer 3

正确使用display: flex解决了您的问题。

使用属性：

 justify-content: center;
 align-items: center;

如下例所示：

.one {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: black;
}

.two {
  background-color: blue;
 }

<div class="one">
  
  <div class="two">
     hello
  </div>
  
</div>

Answer 4

设置.div1显示：table;不显示：table-cell; ...

Answer 5

试试这个。

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            height: 200px;
            width: 100px;
            display: table;
        }
        .div1 {
            
            background: white;
            display: flex;
            text-align: center;
            justify-content: center;
            vertical-align: middle;
            display: table-cell;
        }
        
        .span1 {
            text-align: center;
            font-size: 22px;
            color: #111;
            word-spacing: 100px;
            font-weight: 600;
            max-height: 120px;
            dispaly: block;
            overflow: hidden;
        }
        
        .underline {
            position: relative;
            height: 20px;
            width: 100%;
            background: black;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="div1">
            <span class="span1">God Bless us all.</span>
            <div class="underline"></div>
        </div>
    </div>
</body>

</html>

Answer 6

以下是https://jsfiddle.net/bn430he1/，试试这个。

将内容包装在另一个div中，将div css属性赋予height：auto;并删除display：table-cell;来自div1

希望它有所帮助...

<div class="div1">
<div class="aligned">
  <span class="span1">God Bless us all.</span>
  <div class="underline"></div>
  </div>
</div>

.aligned {
  height:auto;
}

.div1{
  width:100px;
  background:white;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.span1{
    text-align: center;
    font-size: 22px;
    color: #111;
    display: table-cell;
    vertical-align: middle;
    word-spacing: 100px;
    font-weight: 600;
    max-height: 120px;
    dispaly: block;
    overflow: hidden;
}
.underline{
    position: relative;
    height: 20px;
    width: 100%;
    background: black;
}

div

6 个答案:

jsFiddle