html或CSS的文本框如何随着网页界面的缩小或放大跟着左右移动？

Posted 2023-05-16

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html或CSS的文本框如何随着网页界面的缩小或放大跟着左右移动？相关的知识，希望对你有一定的参考价值。

参考技术A <div style="width:100%; text-align:center;"><input type="text" value="Text Box" style="width:300px;" /></div>
实现Text Box左右居中, 随页面界面缩小或放大而一直居中(方法: 使用一个宽度100%的div, 让其内容居中).追问

太感谢了，那么快就有答案了。。
不好意思，可以再发我一个文本框和图片相对定位的代码吗？谢谢了。。。

追答

你要达到什么样的效果? 还是说加上一个图片, 像百度那样图片在上, 文本框在下?

本回答被提问者采纳

缩小占位符文本后如何使占位符和文本框光标居中？

【中文标题】缩小占位符文本后如何使占位符和文本框光标居中？【英文标题】：How can I center the placeholder and text box cursor after shrinking the placeholder text? 【发布时间】：2020-06-12 03:41:05 【问题描述】：

我有一个输入文本框，里面有占位符文本；现在，我正在缩小占位符文本，以便在文本框获得焦点时它仍然可见，但是当我缩小它时，尽管垂直平移，占位符文本太靠近输入框的顶部。

我知道文本框中的光标仍然居中，但我希望占位符文本和光标在文本框中居中。有没有办法只用 CSS 来做到这一点？

//我的输入文本框：

<input
  type="text"
  className=errors.email && errors.email.length !== 0 ? 'bad-input' : ''
  value=this.state.email
  onChange=this.update('email')
  placeholder="Email"
/>

// 缩小占位符文本的样式：

.login-modal-wrapper form .main-content-wrapper input[type="text"]:focus::placeholder,
.login-modal-wrapper form .main-content-wrapper input[type="password"]:focus::placeholder 
  font-size: 12px;
  transform: translateY(-20px);
  transition: all 0.5s;

【问题讨论】：

【参考方案1】：

对于水平居中，您应该使用text-align:center。

垂直调整需要手动设置，但有2个选项；

您可以调整文本框的填充； padding-top:10px; 或 padding-top:40%;

调整文本框内文本的行高； line-height:20px;.

【讨论】：

澄清一下，您的意思是将padding-top 添加到input[type="text"] 选择器中吗？ @Karen 抱歉，无法完全理解。我添加了另一个答案。【参考方案2】：

我又看了你的问题，这次我明白了，通过调整占位符的字体大小，会影响其相对于输入字段内文本的垂直对齐方式。

您可以通过使用position:relative 并更改top 属性来调整占位符伪类；

参见下面的示例；

input::placeholder 
  position: relative;
  top: 30px;
  font-size: 100px;

<!DOCTYPE html>
<html>

<body>
  <form action="/action_page.php">
    <label for="fname">First name:</label>
    <input style="height:100px; width:200px;" type="text" id="fname" placeholder="test" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Submit">
  </form>
</body>

</html>

【讨论】：

以上是关于html或CSS的文本框如何随着网页界面的缩小或放大跟着左右移动？的主要内容，如果未能解决你的问题，请参考以下文章

用CCS修饰一首诗的文本,画边框的时候页面占据了整个网页界面,怎么控制边框的长度啊

怎么查看网站源代码

如何使用 HTML 和/或 CSS 缩小大图像

什么是CSS？

css中怎么给网页设置一个搜索框

css html 如何让div里边的图片和文字同时上下居中？

html或CSS的文本框如何随着网页界面的缩小或放大跟着左右移动 ？

缩小占位符文本后如何使占位符和文本框光标居中？

html或CSS的文本框如何随着网页界面的缩小或放大跟着左右移动？