ВопросВыравнивание кнопок по центру

Здравствуйте. Использовал ваш способ изменения вида кнопок, но возникла проблема: кнопки первоначально выровнены по левому краю и выглядят как нужно, но из-за того, что названия кнопок разные по длине, соответственно и длина самих кнопок разная и выглядит это не оч красиво. Поэтому я хочу выровнять кнопки по центру, но не получается. Получилось выровнять только по правому краю (что бы кнопки выглядели целостно), а при попытке выровнять по центру получается следующее: span.button input выравнивается по центру, а span.button по правому краю (из за того, что background выровнен по правому краю

Комментарии

Аватар пользователя shopot
shopot написал:

Кто знает подскажите, второй день не могу найти решения проблемы, не могу выровнять по центру кнопки. Вот стили:

span.button {
  background:url(../images/connect-button-right.png) no-repeat scroll right  transparent;
  border:medium none;
  cursor:pointer;
  display:inline-block;
  height:56px;
  margin-left:10px;
  margin-right:10px;
  margin-top:10px;
  padding:0 4px 0 0;
}
 
span.button input {
  background:url(../images/connect-button-left.png) no-repeat scroll left top transparent !important;
  font-family:Century Gothic;
  font-size:14px !important;
  color:#99d08d !important;
  border:medium none !important;
  cursor:pointer;
  display:block !important;
  height:56px !important;
  line-height:36px !important;
  margin:0 !important;
  margin-top:10px;
  padding:0px 70px 30px 76px !important;
  white-space:nowrap !important;
}
05.05.2011 20:05
Аватар пользователя Spleshka
Spleshka написал:

добавьте стиль text-align: center;

08.05.2011 20:47
Аватар пользователя shopot
shopot написал:

text-align:center не помогал, решил проблему след. образом: немного изменил вашу функцию, обернув дополнительно ещё в один div и уже для этого div задал text-align:center; вроде всё работает, надеюсь в дальнейшем из-за изменений в функции проблем не возникнет

09.05.2011 01:02
Аватар пользователя Spleshka
Spleshka написал:

Можете посмотреть все кнопки на этом сайте - они центрированы, и сделаны без дополнительных div'ов.

09.05.2011 14:40
Аватар пользователя shopot
shopot написал:

ну вот я смотрю у вас тут кнопки выровнены по левому краю региона, а не по центру

09.05.2011 18:10
Аватар пользователя Spleshka
Spleshka написал:

а ёмаё, по региону надо было выровнять)) Надо тогда было добавить margin: 0 auto;

10.05.2011 00:12
Аватар пользователя shopot
shopot написал:

margin:0 auto не помогало из-за того, что у span.button св-во inline-block, если задавал block то width у span.button становилось равным региону и опять же ничего не выравнивалось.

10.05.2011 01:27
Аватар пользователя Spleshka
Spleshka написал:

а inline-table ?

10.05.2011 11:23
Аватар пользователя shopot
shopot написал:

inline-table если не врёт книга css не поддерживает ie6 и ie7

10.05.2011 11:30
Аватар пользователя Spleshka
Spleshka написал:

Сделать для них хак, который заменяет inline-table на рабочий стиль. Например, на inline или inline-block, смотря что там заработает корректно

10.05.2011 11:58
Аватар пользователя shopot
shopot написал:

там помоему ничего не работает корректно, только если display вообще не задавать, для меня гораздо проще как я сделал один лишний див и 1 св-во)
Да и опять же, есл взять в расчёт что или inline или block будут норм отображать кнопку в ie выровять то их не получится, тогда и весь смысл теряется)

10.05.2011 12:14

Комментировать