Question

我正在尝试浮动两个不同高度的元素，较短的元素位于中间居中。

如果我使用内联块而不是浮动，垂直居中工作正常，但“中间”div不会拉伸以适应。

浮动示例：http://jsfiddle.net/jonofan/r3pejgud/3/

内联块：http://jsfiddle.net/jonofan/87kwpuxa/

也有兴趣听听人们是否认为应该以完全不同的方式进行这种布局。

编辑：我不认为这是this question的副本，因为我当前的代码不使用表格显示。恰巧在这种情况下，“使用表格显示”是最佳答案。

.header {
  width: 600px;
  border: 1px solid black;
  display: inline-block;
}
.header img {
  width: 50px;
  float: left;
}
.middle {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid gray;
  height: 20px;
  overflow: hidden;
}
.middle .itemheading {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 1.8em;
}
.middle .itemdate {
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class='header'>
  <img src='http://i.imgur.com/J2HToiP.jpg' />
  <div class='middle'>
    <span class='itemheading'>Heading Text</span>
    <span class='itemdate'>Wednesday 01 July 2015</span>
  </div>
</div>

Answer 1

不完美，但您不必诉诸绝对定位。请改用var parseObjectProperties = function (obj) { _.each(obj, function(val, key) { if (typeof(key) === 'object') { parseObjectProperties(key); } else { if (getType(val) === 'float') { myObject[key] = parseFloat(val); } else if (getType(val) === 'int') { myObject[key] = parseInt(val); } else if (val === null) { myObject[key] = 0; } } }); }; var getType = function(input) { var match = (/[\d]+(\.[\d]+)?/).exec(input); if (match ) { if (match [1]) { return 'float'; } else { return 'int'; } } return 'string'; } exploreObject(myObject);。

不确定display: table-cell;的边框应如何工作。

.middle

<div class='header'>
    <div class="img-wrap">
        <img src='http://i.imgur.com/J2HToiP.jpg' />
    </div>
    <div class='middle'>
        <span class='itemheading'>Heading Text</span>
        <span class='itemdate'>Wednesday 01 July 2015</span>
    </div>
</div>

http://jsfiddle.net/87kwpuxa/2/

垂直居中对齐图像和多个文本块

1 个答案: