<button> image vs text alignment </button>

Question

正如您在图像中看到的那样，当我使用仅具有常规文本的图像时，按钮未对齐，如果我使用所有文本或所有图像，则它如下所示完美对齐。我假设这是一个CSS问题？

<div style="text-align:center; border:1px solid; border-radius:5px; width:500px; margin: 10px auto 0px auto;">
    <button type="button" onClick="parent.location='cal<?php echo $pyear;?>.php'" style="height:50px; width:50px;">
         <?php echo $pyear;?>
    </button>
    <button type="button" onClick="parent.location='../index.php'" style="height:50px; width:50px">
         <img src="../css/images/home_25.png" />
    </button>
    <button type="button" onClick="parent.location='cal<?php echo $nyear;?>.php'" style="height:50px; width:50px;">
         <?php echo $nyear;?>
    </button>
</div>

将所有图像作为按钮的工作示例。

Answer 1

默认情况下，image与文本的基线对齐。只需在所有3个按钮上使用vertical-align: top。

<div style="text-align:center; border:1px solid; border-radius:5px; width:500px; margin: 10px auto 0px auto;">
    <button type="button" onClick="parent.location='cal<?php echo $pyear;?>.php'" style="vertical-align: top;height:50px; width:50px;">
         22222
    </button>
    <button type="button" onClick="parent.location='../index.php'" style="vertical-align: top;height:50px; width:50px">
        <img src="http://placekitten.com/30/30" />
    </button>
    <button type="button" onClick="parent.location='cal<?php echo $nyear;?>.php'" style="vertical-align: top;height:50px; width:50px;">
         11111
    </button>
</div>

http://jsfiddle.net/2LNQn/