我在html/css中遇到对齐问题。我将我的问题简化为:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
span { display: inline-block; height: 50px; }
span.text { background-color: Yellow;}
span.left, span.right { background-color: Red; width: 20px;}
</style>
</head>
<body>
<span class="left">x</span>
<span class="text">Text comes here</span>
<span class="right">x</span>
</body>
</html>
浏览器中的输出符合预期:
但是，span.left和span.right不应包含任何内容。它们仅用于布局目的。但是，当我删除两个跨度的内容(“x”)时，如下所示:
<span class="left"></span>
<span class="text">Text comes here</span>
<span class="right"></span>
输出更改为:
为什么这样做呢？我该怎么做才能解决这个问题？
最佳答案
垂直对齐存在问题，因为它设置为默认基线。只需将其更改为顶部:
span { display: inline-block; height: 50px;vertical-align:top; }