`
oywl2008
  • 浏览: 1051519 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

DIV实现input垂直居中

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">      
body{font-size:12px;}   
.lanrentuku1{
border: 1px solid #CCC;
width:1120px;
height:40px;
margin:auto;
display: table;   
*position: relative;   
overflow: hidden;  
}   
               
.lanrentuku2 {
vertical-align: middle;
display: table-cell;
*position: absolute;
*top: 50%;
} 
         
.lanrentuku3 {
*position: relative;
*top: -50%;
float:right;
padding-right:10px;
}   
</style>  
<title>DIV实现input垂直居中 兼容IE6、IE7、IE8、Firefox、Safari_智网互联</title>
</head>

<body><br /><br /><br />

<div class="lanrentuku1">  
 <div class="lanrentuku2">  
  <form action="search.php" name="formsearch">
   <div class="lanrentuku3">
   <input name="textfield" style="width:266px; height:37px; vertical-align:middle;line-height:37px;
" type="text" size="30">
   </div>
  </form>
 </div>  
</div>  

<p align="center">DIV实现input垂直居中，兼容IE6、IE7、IE8、Firefox、Safari。</p>
</body>
</html>

 

分享到：
| 图片(旋转/缩放/翻转)变换效果(ccs3/滤 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    关于div中img,span垂直居中的问题

    总而言之，在处理div中img和span的垂直居中问题时，关键是要理解CSS的vertical-align属性的适用范围及其工作原理，并根据实际情况选择合适的方法。对于初学者而言，掌握垂直居中技巧对于创建整齐和美观的Web页面至关...

    div 内table 居中实现代码

    针对这一需求，可以通过CSS（层叠样式表）来实现表格在div内部的水平居中以及垂直居中。 为了实现水平居中，CSS提供了一种非常简便的方法，即使用`margin`属性的`auto`值。当在table元素上设置`margin-left:auto;`...

    通过css控制HTML文本框中的文字垂直居中

    除了上述方法，还可以使用Flexbox或Grid布局来实现文本框内的垂直居中，这两种现代CSS布局模式提供了更为强大的布局控制： - **Flexbox**：通过设置父容器（例如一个`&lt;div&gt;`）的`display`属性为`flex`，并使用`...

    CSS里的各种水平垂直居中基础写法心得总结

    综上所述，CSS中的水平垂直居中实现方法多种多样，分别适用于不同的布局需求。掌握这些基础的居中方式，对于我们进行网页布局和页面设计具有非常重要的意义。通过阅读这篇文章，我们可以了解到行内元素和块级元素的...

    利用vertical-align:middle实现行内元素的水平垂直居中对齐

    在Web开发中，实现元素的水平垂直居中对齐是一个常见的布局需求。传统上，我们会使用Flexbox或CSS Grid等现代CSS布局技术来实现这一目标。但是，利用`vertical-align:middle`属性也能达到类似的效果，并且在某些情况...

    用CSS让按钮居中显示的思路及代码

    就是做到类似于下图这种效果 通过简单的Css样式就可以... 可以让你的div居中对齐。 .style{margin-left:auto;margin-right:auto;} 缩写形式为： .style{margin:0 auto;} 数字0 表示上下边距是0。可以按照需要设置成不

    搜索框符号居中

    - **Flexbox**：将父容器的display属性设为flex，并设置justify-content和align-items为center，这样子元素（包括输入框和图标）会水平和垂直居中。 ```css .search-container { display: flex; justify-...

    jsp浏览器的兼容性

    为了实现垂直居中，需要将 line-height 设置为当前 Div 相同的高度，然后通过 vertical-align: middle 实现。 11.导航菜单上的 a 标签内容加上样式 在导航菜单上的 a 标签内容加上样式时，需要设置 display: block...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery...

    表单元素对齐

    /* Flexbox 垂直居中 */ .flex-vertical-center { display: flex; align-items: center; } ``` 在HTML中，可以直接应用这些样式： ```html &lt;div class="center-align"&gt; 用户名： &lt;input type="text" id=...

    CSS实现让同一行文字和输入框对齐的方法

    通过比较这两行代码的显示结果，我们可以明显看到设置了`vertical-align`属性的输入框和文本能够实现垂直居中对齐。 具体的CSS代码如下： ```css #a input { width: 200px; height: 30px; border: 1px solid red...

    通过简单的css样式让按钮居中显示

    它可以轻松地实现子元素的水平和垂直居中： ```css .container { display: flex; justify-content: center; align-items: center; } ``` ```html &lt;div class="container"&gt; 点击我 &lt;/div&gt; ``` 在`display: ...

    HTML/CSS实现的搜索框.zip

    在这个例子中，`.search-container`使用了`display: flex`来让输入框和按钮水平居中，并通过`align-items: center`使它们垂直居中。`#search-input`和`#search-btn`分别设置了输入框和按钮的样式，确保它们在视觉上...

    腾讯企业邮箱登录摆放水平垂直设置

    ` 是用于实现水平和垂直居中的关键CSS属性。登录按钮的点击事件是通过HTML的`&lt;form&gt;`标签和`action`属性实现的，当用户点击登录按钮，表单数据会被发送到指定的URL（此处替换为`https://example.com/login`，实际应...

    html+css面试题答案.docx

    垂直水平居中是 CSS 中一个常见的问题，实现方法有很多种，以下是一种简单的实现方法： HTML 结构：&lt;div class="wrapper"&gt; &lt;div class="content"&gt;&lt;/div&gt;&lt;/div&gt; CSS：.wrapper{position:relative;}.content{...

    CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

    从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下....1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控

    前端面试题及答案汇总HTML.pdf

    可以使用以下方法实现垂直水平居中：&lt;div class="wrapper"&gt; &lt;div class="content"&gt;&lt;/div&gt; &lt;/div&gt; CSS：.wrapper{position:relative;} .content{ background-color:#6699FF; width:200px; height:200px; position: ...

    前端开发面试题及答案.pdf

    `结合，让层在浏览器中垂直居中。 8. Firefox嵌套`div`的居中问题： 在父`div`中设置`text-align: center;`，子`div`设置`margin: 0 auto;`，可实现子`div`在父`div`中水平居中。 9. Web标准网站的优点： - 快速...

Magicbox
Global site tag (gtag.js) - Google Analytics