将输入框放在div的中心

编程入门 行业动态 更新时间:2024-10-25 04:19:46
本文介绍了将输入框放在div的中心的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我有一个div,我希望输入框位于它的中心。我怎么做到这一点?

I have a div, and I want the input box to be place at it's center. How can I do this?

推荐答案

输入元素是内联的。 在将它定位到中心之前,我们必须先将它封锁(显示:块):margin:0 auto。请参阅下面的代码:

The catch is that input elements are inline. We have to make it block (display:block) before positioning it to center : margin : 0 auto. Please see the code below :

<html> <head> <style> div.wrapper { width: 300px; height:300px; border:1px solid black; } input[type="text"] { display: block; margin : 0 auto; } </style> </head> <body> <div class='wrapper'> <input type='text' name='ok' value='ok'> </div> </body> </html>

但是如果你有一个定位为绝对的div,那么我们需要做一些不同的事情。

But if you have a div which is positioned = absolute then we need to do the things little bit differently.Now see this!

<html> <head> <style> div.wrapper { position: absolute; top : 200px; left: 300px; width: 300px; height:300px; border:1px solid black; } input[type="text"] { position: relative; display: block; margin : 0 auto; } </style> </head> <body> <div class='wrapper'> <input type='text' name='ok' value='ok'> </div> </body> </html>

希望这可以有帮助。谢谢。

Hoping this can be helpful.Thank you.

更多推荐

将输入框放在div的中心

本文发布于:2023-11-09 15:55:50,感谢您对本站的认可!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:放在   输入框   中心   div

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!