Question

我们;）从这个例子： Fiddle

我有一个响应式布局，有2列。

我必须垂直居中左侧div文本＆＃34; lorem ipsum＆＃34;。

在这种情况下，最佳解决方案是什么？

#parent{
position:absolute;
right: 20%;
width: 45%; /* 60% if you include the padding-left */
padding-left: 15%;
background-image: url('x.png');
text-align: right;
background-color: #ddd;
}

Answer 1

您可以使用:before或:after伪选择器将其垂直居中，如下所示：

#parent {
  position:absolute;
  right: 20%;
  width: 45%; /* 60% if you include the padding-left */
  padding-left: 15%;
  background-image: url('x.png');
  text-align: right;
  background-color: #ddd;
}
#margin{
  white-space: nowrap;
  width: 15%;
  height: 100%;
  padding-right: 12px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: #999;
  background-image: url('y.png');
}
#margin:before {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  margin: 0 0 0 -5px;
  height: 100%;
  width: 1px;
  content: '';
}

#margin .text-holder {
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
}

<div id="parent">
  <div id="margin">
    <div class="text-holder">
      Lorem ipsum.
    </div>
  </div>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in odio leo, vel egestas arcu. Pellentesque iaculis tincidunt tortor, vel rhoncus justo cursus nec.

</div>

Answer 2

您#margin元素的一种方法可能是Flexible Box Layout 。

#margin{
    width: 15%;
    height: 100%;
    padding-right: 12px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #999;
    background-image: url('y.png');

    /* New code to center vertically... */
    display: flex;
    align-items: center; 
}

align-items属性定义灵活容器内项目的默认对齐方式。

您可以查看this fiddle以获取示例。

如何在父div中垂直居中文本，在响应式布局中使用两列

2 个答案: