Я использую CSS для разработки ASP: Button, однако - не очень хорошо знаю CSS, я просто не могу заставить текст появляться в середине кнопки.
Я использую этот CSS
display: block;
float: left;
clear: left;
height: 34px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
vertical-align: super;
line-height: normal;
position: relative;
padding-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-variant: small-caps;
text-transform: capitalize;
color: #000000;
Однако, как вы можете видеть из изображения ниже, результат далеко не удовлетворительный. Как получить текст в середине кнопки, как и следовало ожидать?
Есть идеи?
Файл aspx содержит этот код:
<form action="#" method="post">
<h1>Register</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
Полный.css находится здесь:
/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Date: March 26, 2009
Version: 1.0
Copyright 2009 Jeremie Tisseau
"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
http://www.gnu.org/licenses/gpl-3.0.html
*/
/***** clearfix *****/
.clear
{
clear: both;
height: 0;
line-height: 0;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix
{
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix
{
height: 1%;
}
.clearfix
{
display: block;
}
/* End hide from IE-mac */
.clearfix
{
height: 1%;
}
.clearfix
{
display: block;
}
/* Panel Tab/button */
.tab
{
background: url(../images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login
{
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left
{
background: url(../images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right
{
background: url(../images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li
{
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(../images/tab_m.png) repeat-x 0 0;
}
.tab ul.login li a
{
color: #15ADFF;
}
.tab ul.login li a:hover
{
color: white;
}
.tab .sep
{
color: #414141;
}
.tab a.open, .tab a.close
{
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}
.tab a.open
{
background: url(../images/bt_open.png) no-repeat left 0;
}
.tab a.close
{
background: url(../images/bt_close.png) no-repeat left 0;
}
.tab a:hover.open
{
background: url(../images/bt_open.png) no-repeat left -19px;
}
.tab a:hover.close
{
background: url(../images/bt_close.png) no-repeat left -19px;
}
/* sliding panel */
#toppanel
{
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel
{
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h1
{
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}
#panel h2
{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}
#panel p
{
margin: 5px 0;
padding: 0;
}
#panel a
{
text-decoration: none;
color: #15ADFF;
}
#panel a:hover
{
color: white;
}
#panel a-lost-pwd
{
display: block;
float: left;
}
#panel .content
{
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left
{
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right
{
border-right: 1px solid #333;
}
#panel .content form
{
margin: 0 0 10px 0;
}
#panel .content label
{
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field
{
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field
{
background: #545454;
}
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login, #panel .content input.bt_register
{
display: block;
float: left;
clear: left;
height: 34px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 0px 0 10px;
vertical-align: super;
line-height: 54px;
position: relative;
padding-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-variant: small-caps;
text-transform: capitalize;
color: #000000;
}
#panel .content input.bt_login
{
width: 74px;
background: transparent url(../images/bt_login.png) no-repeat 0 0;
}
#panel .content input.bt_register
{
width: 94px;
color: white;
background: transparent url(../images/bt_register.png) no-repeat 0 0;
}
#panel .lost-pwd
{
display: block;
float: left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}
Изменить line-height: normal;
до line-height: 34px;
, Если вы создадите line-height
линии так же, как и height
текст будет располагаться вертикально.
редактировать
Вы также можете изменить padding
кнопки, чтобы отрегулировать текст. Хотя это не предпочтительный метод IMO, он все равно будет работать.
Спасибо за помощь.
То, что я закончил, - это удаление формы и изменение этого
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
К кнопке Asp: Button и присвоению css классу. как это
<asp:Button ID="signup" runat="server" class="button"/>
Который сделал трюк.
line-height
.