相关疑难解决方法(0)

我有一个包含文本的div元素,我想将此div的内容垂直居中对齐.

这是我的div风格:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

<div id="box">
  Lorem ipsum dolor sit
</div>

做这个的最好方式是什么？

我正在努力实现类似于这张图片的东西:

我有一个包含在div中的图像(作为幻灯片的一部分),并且使用:before和:after伪元素,我显示两个控件移动到幻灯片的下一个(>>)或前一个(<<)图像.

到目前为止,我有这个:

div {
  position: relative;
}

div:before {
  display:block;
  height: 100%;
  content: "stuff";
  position:absolute;
  top: 0; left: 0;
  text-align: center;
}

但是,我不能将伪元素的内容集中在一起,文本看起来像这样:

这有可能实现吗？如果没有,那么最具语义性的解决方法是什么？我不想把元素本身,只是它的内容集中.我希望将元素拉伸到100%高度.

编辑: http ://jsfiddle.net/rdy4u/

编辑2:此外,img是液体/液体,div/img的高度未知,宽度设置为800px和max-width80%.