Question

首先需要告诉您我正在使用此代码：

  .text.ellipsis {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 5px;
}

因为我需要为标题设置多行椭圆。这部分代码可以工作。

但是现在我需要将div中的div垂直居中，这部分代码部分工作....我真的尝试了所有但仍无法解决问题。

你可以在这里看到实例：http://phpbb32.majordroid.com/index.php

在蓝色div内部一切都很好，但是由于某种原因，在白色div标题内部下沉，或者换句话说不是居中。

所以我希望你能帮助我在div里面垂直居中，它需要在IE8 +中工作

谢谢

Answer 1

Flexbox救援：

.outer { 
  border:3px solid black; 
  height:300px;
  
  /* Just set up the container element to use flexbox */
  display:flex;
  justify-content:center;
  align-items:center;
}
.inner { border:3px dashed green; height:100px; width:100px; }

<div class="outer">
  <div class="inner"></div>
</div>

Answer 2

＆＃13;

.box {
  position: relative;
  width: 250px;
  height: 250px;
  background-color: #E4E4E4;
  margin: 30px;
}
.box .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 150px;
}
.text.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

＆＃13;

<div class="box">
  <div class="text ellipsis">lorem ipsum dolor sit amet</div>
</div>

＆＃13;

如何在div内垂直居中div

2 个答案: