<кнопка> изображение против выравнивания текста

Question

<кнопка> изображение против выравнивания текста

0

как вы можете видеть на изображении, когда я использую изображение с обычным текстом, кнопки не выровнены, если я использую весь текст или все изображение, которое оно идеально выравнивается, как показано ниже. Я предполагаю, что это проблема 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>

рабочий пример со всеми изображениями в виде кнопок.

Albert D 31 дек. 2013, в 07:46

Источник

Теги:

html

css

1 ответ

Ещё вопросы

James Montagne · Accepted Answer · 2013-12-31T05-18-00.000Z

По умолчанию image выравнивается по отношению к базовой линии текста. Просто используйте vertical-align: top на всех 3 кнопках.

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

работал отлично, у меня есть побочный вопрос, имеет ли значение, если я войду в последний; например: style = "height: 50px; width: 50px"> или это должен быть стиль = = height: 50px; width: 50px; "> не вызовет ли использование первого метода какие-либо проблемы?
Последний вариант не является обязательным, независимо от того, является ли «должен» спорным.
@AlbertD: ты можешь принять ответ, парень, если это помогло !! :)