<button>图片与文字对齐</button>

Question

as you can see in the image, when I use an image with just regular text the buttons are not aligned, if I use all text or all image it aligns perfectly as seen below. i'm assuming this is a css problem?

<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>

working example with all images as buttons.

Answer 1

By default the image is aligned to the baseline of the text. Simply use vertical-align: top on all 3 buttons.

<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/