gpt4 book ai didi

html - 如何对齐按钮中的文本并将按钮与输入字段对齐

转载 作者:行者123 更新时间:2023-11-28 02:59:45 25 4
gpt4 key购买 nike

我有一个输入框和按钮。但是,有两个问题。

  • 按钮中的文本未居中。
  • 按钮的高度永远不会与输入的高度相同。

可视化:

for visual people....

好的,我也整理了一个超方便的fiddle to play with this .

我该如何解决这些问题?使其看起来“完美对齐”。我尝试摆弄高度设置,但没有成功。

fiddle 中的代码:

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;
}

最佳答案

为你的绿色按钮尝试这个 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;顶部:1px;/* 调整顶部 以重新定位按钮

关于html - 如何对齐按钮中的文本并将按钮与输入字段对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46271041/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com