Вот мой HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> input.navbutton { text-align: center; min-width: 100px; } </style> </head> <body> <input type="submit" class="navbutton " value="Next" /> </body> </html>
В IE 7 это выглядит примерно так:
Но в Firefox это выглядит так:
Как видите, текст в IE 7 не по центру.
Есть идеи, как это решить?
min-width для кнопки уже не работает в IE6 / 7 (она не будет расширять кнопку вообще, когда текст больше, как вы, вероятно, ожидаете) Замени его на width и живи с ним.
min-width
width
Мне потребовалось время, чтобы понять это, но я наконец-то понял. Необходимо использовать комбинацию из трех свойств:
input.navbutton { min-width: 100px; overflow: visible; line-height: 120%; }
Ваш текст будет центрирован автоматически. line-height можно исключить, если вы выравниваете текст по левому или правому краю. См. этот jsfiddle для полного примера.
line-height
Хороший жук, ты поймал там einarq ..
Это может быть связано с ошибкой минимальной ширины: http://social.msdn.microsoft.com/Forums/en/iewebdevelopment/thread/e54188ad-cdad-4168-bbf9-2d0b5271676d
Единственный возможный обходной путь, который я вижу, - это сбросить минимальную ширину и добавить левый и правый отступы.
Попробуйте это:
input.navbutton { text-align: center; min-width: 100px; align:center; }
В IE (старый), align также влияет на текст.
align
это была большая проблема для меня, но у меня есть решение
input.navbutton { text-align: center; min-width: 100px; margin: auto; }
добавление авто вернет текст на место.
у меня это работает на IE
попробуйте изменить свой CSS на это:
input.navbutton { text-align: center; min-width: 100px; }
Попробуйте margin: 0 auto; в вашем CSS.Я знаю, что это центрирует текст для тегов <div>, но я не знаю о кнопках.
margin: 0 auto;
<div>