Установить определенный размер CSS кнопки?

Question

[Cheezo]

Добрый день.

Есть CSS файл с кнопкой:

.button {
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 12px 24px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #eff1f2;
   font-size: 17px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border: 1px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #c2bec2;
   }
.button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
   }

Все бы хорошо, но длина кнопки настраивается сама, в зависимости от длины текста.

Как сделать так, чтобы кнопки имели одинаковую длину и текст по центру? Длину в px.

Answer 1

[armid]

Замените

.button {...}

на

.button {
   width: 250px;
   height: 26px;
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   /*padding: 12px 24px;*/
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #eff1f2;
   font-size: 17px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }

Comments

[Cheezo]

До:
clip2net.com/s/4WJYxp
Стало:
clip2net.com/s/4WJZ95

Похоже, не то.

Надо бы скажем чтобы кнопка JavaScript было по размеру (длине) как и кнопка Лекционный материал.

[anathem]

Добавить еще display: block;

[Cheezo]

Во, теперь они имеют одинаковый размер, правда текст не по центру.
clip2net.com/s/4WK96U

[Максим Иванущик]

Попробуйте изменить
display:block;
на
display:inline-block;

И добавить
line-height:26px;

[Cheezo]

clip2net.com/s/4WKeug
Так, теперь они выровнялись, спасибо, но нужно чтобы они также были по центру.
Т.е. текст был не слева, а по середине.

[anathem]

text-align: center;

[Cheezo]

Как я не догадался.
Всем огромнейшей спасибо, все работает как нужно.
clip2net.com/s/4WKiNP

Answer 2

[Softlink]

width: ...; + text-align: center; ? Или в чем подвох здесь?

Comments

[Cheezo]

Скажу честно, я в CSS еще не очень понимаю.
Просто сейчас длина кнопки настраивается сама, по длине текста в ней.
А надо чтобы я могу сам задать ее размер (скажем 250х26 px) и текст в ней был по центру, вне зависимости от его длины.
Было бы здорово, если бы вы намекнули, куда вписать строчку.