Question

我有一个输入字段＆amp;按钮。但是，有两个问题。

按钮中的文字不居中。
该按钮的高度与输入的高度不同。

想象它：

for visual people....

好的，我还整理了一个非常方便的fiddle to play with this。

我该如何解决这些问题？让它看起来＆＃34; 完全对齐＆＃34;。我尝试摆弄高度设置，虽然没有成功。

那个小提琴的代码：

HTML:
<body style="background-color: #5a6b7d">
<div style="text-align: center">
    <h1 id='format' style="margin-top: 50px;">Welcome to our site</h1>
    <p id='format' style="">this is a site</p>
    <br>
    <h2 id="format"><i class="fa fa-chevron-down" aria-hidden="true"></i> Type your username <i class="fa fa-chevron-down" aria-hidden="true"></i></h2>
    <input type="text" placeholder="Type a username" style="font-size: 140%; text-align: center;" align="center">
    <a href="index.php"><button id="playbutton">Play</button></a>
</div>
</body>

CSS:
button[id=playbutton]{
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 5px;

        height: 40px;
    }

    button:hover{
        background-color: darkgreen;
    }

Answer 1

尝试使用此css作为绿色按钮：

button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 8px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
position: relative;
top: -2px;
}

使用position: relative; top:1px; /* adjust this top重新定位按钮

Answer 2

＆＃13;

button[id=playbutton]{
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
       
        cursor: pointer;
        border-radius: 5px;

        height: 40px;
    }

    button:hover{
        background-color: darkgreen;
    }
    #username{
    height: 40px;
    padding:0px;
    margin-right: 10px;
    }
    .input-fields{
    display:inline-flex;
    }

＆＃13;

<body style="background-color: #5a6b7d">
<div style="text-align: center">
    <h1 id='format' style="margin-top: 50px;">Welcome to our site</h1>
    <p id='format' style="">this is a site</p>
    <br>
  
    <h2 id="format"><i class="fa fa-chevron-down" aria-hidden="true"></i> Type your username <i class="fa fa-chevron-down" aria-hidden="true"></i></h2>
      <div class="input-fields">
    <input id="username" type="text" placeholder="Type a username" style="font-size: 140%; text-align: center;" align="center">
    <a href="index.php"><button id="playbutton">Play</button></a>
    <div>
</div>
</body>

＆＃13;

Answer 3

这个怎么样：

button[id=playbutton]{
    background-color: #4CAF50;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    height: 40px;
    /* New */
    padding: 0px;
    width: 50px;
    height: 20px;
}

填充0px将使文本在按钮内居中，并且可以使用宽度和高度来定义按钮大小。如果你不知道图片或其他东西的确切尺寸，这是一个很好的居中选择。

这是JSFiddle：
https://jsfiddle.net/vLbbkcna/3/

Answer 4

只需将您的按钮CSS替换为：

button[id=playbutton]{
    background-color: #4CAF50;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 3px;
    line-height: 35px;
    width: 80px;
}

如何对齐按钮中的文本和对齐按钮以输入feild

4 个答案: