Question

当我尝试将<listeners> <listener class-name="org.uncommons.reportng.HTMLReporter"/> <listener class-name="org.uncommons.reportng.JUnitXMLReporter"/> </listeners> <suite-files> <suite-file path="testnglocation.xml" /> <suite-file path="testngdepartment.xml" /> </suite-files> <test name="Process" > <classes> <class name="AdministrationTestCases.CreateProcess_TC"></class> <class name="AdministrationTestCases.UpdateProcess_TC"></class> <class name="AdministrationTestCases.DeleteProcess_TC"></class> </classes> </test> </suite>垂直居中img时，我在其他网站上看到了此代码。

button

button {
  line-height: 0;
  height: 50px;
}
img {
  height: 25px;
}

没有<button> <img src="https://www.materialui.co/materialIcons/action/search_24px.svg" alt="search" /> </button>图像不是按钮的垂直中心。但是当我们放line-height: 0;时，它就完美了。我用chrome 50测试了它。为什么会这样？

http://codepen.io/asim-coder/pen/ezmYwm

Answer 1

为什么line-height: normal不起作用，因为“normal”的值不仅仅是应用于所有元素的单个具体值，而是根据字体大小设置计算到“合理”值（元素上的或继承的）。 Height和line-height是两回事。这就是为什么你没有得到垂直centered输出。

line-height: 0将文本行的高度设置为null。清除文本的默认line-height。

您可以使用vertical-align: middle规则

垂直对齐元素

button {
  height: 50px;
}
img {
  height: 25px;
  vertical-align: middle;
}

<button>
   <img src="https://www.materialui.co/materialIcons/action/search_24px.svg" alt="search" />
</button>

line-height：0将图像置于按钮的垂直中心

1 个答案: