Question

我想知道如何将line-height设置为始终等于容器div的高度 - 以便将容器内部的元素置于容器高度的中间位置。

假设我有以下内容：

ProducerConfig.set("compression.codec","snappy")

如何设置行高，以便在容器div的高度发生变化时随着更改而变化？

谢谢你uksz

Answer 1

您将另一个内联级元素放在同一行，其高度等于容器的100％。这里使用display:inline-block;是最常见的，但任何高度适用的内联级元素，例如inline-table，inline-flex或替换的内联元素也可以正常工作。

例如div：before {content：'';显示：内联块;高度：100％;垂直对齐：中部; }

html, body { height: 900px; }

div { border:1px solid black; height: 12%; }

div:before { content:''; display:inline-block; height:100%; vertical-align:middle; }

<div>
<i>My text</i>
</div>

Answer 2

直观的方法是将import UIKit func monthsSince(from: NSDate, to: NSDate) -> Int { let fromComponents = NSCalendar.currentCalendar().components([.Month, .Year], fromDate: from) let toComponents = NSCalendar.currentCalendar().components([.Month, .Year], fromDate: to) return ((toComponents.year - fromComponents.year) * 12) + (toComponents.month - fromComponents.month) } let tests = [ (from: (day: 1, month: 1, year: 2016), to: (day: 31, month: 1, year: 2016), result: 0), (from: (day: 22, month: 1, year: 2016), to: (day: 5, month: 2, year: 2016), result: 1), (from: (day: 22, month: 12, year: 2015), to: (day: 1, month: 1, year: 2016), result: 1), (from: (day: 1, month: 1, year: 2016), to: (day: 1, month: 2, year: 2016), result: 1), (from: (day: 1, month: 1, year: 2016), to: (day: 1, month: 3, year: 2016), result: 2) ] for test in tests { let from = NSCalendar.currentCalendar().dateWithEra(1, year: test.from.year, month: test.from.month, day: test.from.day, hour: 0, minute: 0, second: 0, nanosecond: 0)! let to = NSCalendar.currentCalendar().dateWithEra(1, year: test.to.year, month: test.to.month, day: test.to.day, hour: 0, minute: 0, second: 0, nanosecond: 0)! if monthsSince(from, to: to) == test.result { print("Test \(test), Passed!") } else { print("Test \(test), Failed!") } }设置为line-height，但实际上只是将行高设置为字体大小的100％

假设你可能想要集中文字，试试这个

100%

div的行高和动态高度

2 个答案: