Question

我见过像How to vertically align spans with text and image这样的类似问题，但对于我的生活，我看不出我做错了什么。

以下是我作为整个html页面的最小示例：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
body {
    font: 16px serif;
}
#mydiv span {
    vertical-align: bottom;
}
#mydiv select {
    font: 16px serif;
    text-decoration: none;
    background-color: #FFF;
    vertical-align: bottom;
}
  </style>
  <script type="text/javascript">
  </script>
</head>

<body>
  <h1>Hello World!</h1>

  <div id="mydiv">
    <span>Testing 1:</span>
    <select id="myselect"><option value="1">[My option]</option></select>
    <span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAAQxJREFUOI2l1DtOA0EMBuBPiGMgUBo4AQWioEAkCCpuACUSuQLcgYI+4QJ0NAREkWOkiBBCPBraFLsU6w3L7uZFfsmSx2P/Y8/YQz1a6GKAUcggbAc1/pdlwxb6SGfIEzYi5gpJkWQP3+GYoIc2miFtPMdeinfcFNbjTHKSYZBOwhE+arKkUM4Qa1NIclzXEbUK5UzLJEd+JxWibii9JUjSVeyG090MkjOcysqvxShYm3NkNBErywSXiV5C31yWqB/6yT/iO7IuP2fx589xHDEJdnLjog3ZwFvE3Bc3FhmRfbyG7yfWyw7loX3Ahb9D++i3Ib+wPem0eb6RRHbBjSlZj3GIW9WPrROlVfADiJ5vX7sneXIAAAAASUVORK5CYII="/></span>
  </div>

</body>
</html>

我想要的是，带文字的跨度，旁边的选择，以及垂直对齐图像的跨度 - 中间或底部。但是，我得到的是Firefox 43：

不知何故，跨度/文本，选择和跨度/图像看起来与我垂直对齐;所以要查看，这是来自Firefox的蒙太奇：

那么，我怎样才能将这些元素垂直对齐在一条线上 - 中间或底部？

Answer 1

尝试这个：

GROUP BY Cantidad

Answer 2

尝试下拉margin-bottom: -3px;以对齐文本。
从图片范围中移除vertical-align，并为图片提供相同的margin-bottom: -3px;。

Answer 3

好的，我尽可能接近：

基本上：

第一个span和select中的文字基线（几乎）已对齐
图片span相对于select

......这就像我一样好，我想。有点奇怪的是，CSS中的任何地方都没有vertical-align: middle;来获得此输出？以下是Firefox中视觉检查的叠加层：

......这是代码：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
body {
    font: 16px serif;
}
#mydiv span#s1 {
    vertical-align: baseline;
    line-height: 1.25em;
    display: inline-block;
}
#mydiv span#s2 {
    vertical-align: baseline;
    line-height: 1.25em;
    display: inline-block;
}
#mydiv span img {
    vertical-align: sub;
  line-height: 1em;
}
#mydiv select {
    font: 16px serif;
    line-height: 1.25em;
    display: inline-block;
    text-decoration: none;
    background-color: #FFF;
    vertical-align: baseline;
    border: 2px solid gray;
    padding: 0;
    margin: 0;
}
  </style>
  <script type="text/javascript">
  </script>
</head>

<body>
  <h1>Hello World!</h1>

  <div id="mydiv">
    <span id="s1">Testing 1:</span>
    <select id="myselect"><option value="1">[My option]</option></select>
    <span id="s2"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABHNCSVQICAgIfAhkiAAAAQxJREFUOI2l1DtOA0EMBuBPiGMgUBo4AQWioEAkCCpuACUSuQLcgYI+4QJ0NAREkWOkiBBCPBraFLsU6w3L7uZFfsmSx2P/Y8/YQz1a6GKAUcggbAc1/pdlwxb6SGfIEzYi5gpJkWQP3+GYoIc2miFtPMdeinfcFNbjTHKSYZBOwhE+arKkUM4Qa1NIclzXEbUK5UzLJEd+JxWibii9JUjSVeyG090MkjOcysqvxShYm3NkNBErywSXiV5C31yWqB/6yT/iO7IuP2fx589xHDEJdnLjog3ZwFvE3Bc3FhmRfbyG7yfWyw7loX3Ahb9D++i3Ib+wPem0eb6RRHbBjSlZj3GIW9WPrROlVfADiJ5vX7sneXIAAAAASUVORK5CYII="/></span>
  </div>

</body>
</html>

如果出现比这更好的答案，我会重新接受它......

将跨度与文本垂直对齐，选择并跨越单行图像？

3 个答案: