input 垂直居中

2024-11-03

css样式让input垂直居中

css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; display: table; *position: relative; overflow: hidden; } .div2 { vertical-align: middle; display: table-cell; *position: absolute; *top: 50%; } .div3 { *pos

web移动端Fixed在Input获取焦点时ios下产生的BUG及处理

1.现象可以看到下面两张图,图1搜索框为fixed固定在顶部,滚动没有任何问题. 图2当光标进入搜索框时,ios自作聪明的把光标定位到中间,并且fixed属性被自动修改成了absolute.此时注意滚动页面的话,会发现原本fixed的搜索框跟着文档一起滚动了. 再仔细观察ios下的一些特点,ios为了让input垂直居中,甚至还滚动了滚动条,原本看不到的上半段产品的内容也漏出来了. 2. 参考别人的解决方法在网上搜索过后,大部分都是转载的这一篇文章,甚至配图都是拿别人原来的: http://

chrome下input[type=text]的placeholder不垂直居中的问题解决

http://blog.csdn.net/do_it__/article/details/6789699 <input type="text" placeholder="search word" name="p" /> 但是在chrome下显示的search word并不能垂直居中. 后来找了很久终于在stackoverflow上找到了对应的方法. 参考:http://stackoverflow.com/questions/49196

input元素垂直居中

chrome,firefox,safari, ie9+ 会根据高度自动居中文字: IE9- 以下用这段代码垂直居中: input[type="text"] { line-height: 36px\9; // CSS Hack only for IE. }

图片文字 input等垂直居中对齐

span::before { width:100%; height:1px; font-size:1em; content:''; background:#fff; position:absolute; top:50%} img { border:0; vertical-align:middle} input, select { vertical-align:middle} img + img, input + input, select + select { margin-top:-.14em

input placeholder文字垂直居中(Mobile & PC)

Html5输入框支持placeholder,但是在定义文本框中定义placeholder存在兼容问题 <input type="text" placeholder="search word" name="p" /> 但是在chrome下显示的search word并不能垂直居中. 在stackoverflow上找到了对应的方法.参考地址:http://stackoverflow.com/questions/4919680/html5-

当placeholder的字体大小跟input大小不一致，placeholder垂直居中

当placeholder的字体大小跟input大小不一致,实现placeholder垂直居中设计稿的placeholder的样式是这样的输入值的时候大小是这样的最后想要实现的效果是这样的当我这样写的时候 input::-webkit-input-placeholder{ color: #D9D9D9; font-size: 36px; } 效果是这样的,会稍微偏低一点后面我加了一个translate,就可以实现垂直居中 input::-webkit-input-placeholder{

ios中 input 焦点光标不垂直居中

笔记:在ios,如果同时给input设置这种平时我们使字体垂直居中的css写法. 光标会出现,如下图的问题 . 改正方案: 采取不使用line-height的垂直居中方法即可.

移动端华为手机 input中placeholder垂直居中失效

为一个app写了一个嵌套的提现页面,效果如下图 input给定宽高,给了line-heigh,在浏览器查看效果正常,placeholder内容以及光标显示都是垂直居中的, IOS显示正常, Android华为手机上placeholder以及光标都失效,都没有垂直居中, 最后给input设置样式, line-heigh:normal; 查看华为手机恢复正常. 最后自己做了个试验,给定input宽高后,不写line-heigh,placeholder也会自动垂直居中, 在华为手机中好像必须给定lin

当placeholder的字体大小跟input大小不一致时，实现placeholder垂直居中

如图:搜索和图标不是垂直居中着实难受最终通过如下代码实现: input::-webkit-input-placeholder { transform: translate(0, 2px); }

浏览器兼容CSS代码：按钮文字垂直居中(input button text vertical align)

经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comment_submit" type="button" class="comment_btn" value="提交评论"/> CSS代码: ;;}/*针对Firefox*/ .comment_btn{ height:26px; line-

解决Firefox下input button内文字垂直居中

众所周知,在Firefox下input type=”button”的文字是不好居中的,原因在于Firefox自己比较二,弄了个私有属性,导致以下问题的出现: 按钮左右本身有2px的间距(FF私有属性写了padding:0 2px所致): 按钮文字居中是不行的(此时设置padding-bottom是没用的) : 等等… 1 input[type="reset"]::-moz-focus-inner, 2 input[type="button"]::-moz-focus

设置input框文字垂直居中和宽度

input { solid #999;height:22px; background:#ffffff; line-height:22px; margin:0px; padding:0px;/*表单输入框内文字居中*/ vertical-align:middle;/*表单控件上下居中对齐*/} 设置input的宽度和高度 .input{ width:300px; height:18px; } 在input中调用该class,这个设置统一的宽度可以解决type=text和type=password长

input文字垂直居中和按钮对齐问题，兼容IE8

1.盒子模型问题:请CSS重置 2.按钮不对齐:请浮动或者vertical-align:middle;然后计算宽高,使其对齐 : 3.IE8文本不居中:line-height属性注意:IE8不支持font写法(或者某个样式不支持) IE浏览器测试到IE8,IE5.6.7慎用. 问题原因:盒子模型 1.盒子模型: 在页面放2个input,一个text文本框,一个button按钮(设置宽高,无任何其他样式) input[type='text']{width:400px;height:45p

input type="datetime-local" 时placeholder不显示

一个坑,input的type="datetime-local" 时,电脑上会显示提示,如图 <input type="datetime-local" name="user_date" placeholder="请选择时间" /> 但是,手机上不会显示,就是一片白,加上placeholder也是白费. 添上这段代码,亲测ios可以正常提示提示信息,安卓还是一片白. input[type="datetime-

css确定元素水平居中和垂直居中

---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当然是因为不同类别元素的性质不同.所以我们先来了解下html的元素类别. 一.HTML元素分类 1)内联(inline)元素: <a>--锚点 <abbr>--缩写 <acronym>--首字母缩写(HTML5不支持,请使用<abbr>代替) <b>-

css垂直居中那点事

这是我技术博客生涯的第一篇文章,想想还是有点小鸡冻...菜鸟的征程现在要开始了学习css的时候经常被各种问题纠结到不要不要的,没办法,只能写写博客帮助整理一下自己的思绪和帮助一下和我遇到同样问题的小伙伴们不知道各位学习css的小伙伴会不会被垂直居中的问题虐的好痛苦,反正我也被虐的挺惨但是稍微整理一下,感觉好像垂直居中也就那么回事. 一,利用line-height line-height是一个设置行高的一个css样式,一行文字上面的空白+下面的空白=行高他可以帮助我们解决垂直居中的问题当

DIV元素水平和垂直居中

在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align,但是这个属性对div元素不起作用. 目前通用的解决办法是,使用绝对定位,然后设置left和top为50%.然后通过margin来设置.下面具体代码演示了一个简单的登录页面,然后使登录界面水平居中和垂直居中.代码如下: <html> <head> <title>div元素水平

html5开发移动页面去掉点击出现的透明阴影----&&-----元素垂直居中

[摘要:做好的页里正在脚机端测试时,发明局部扫瞄器,tap后会涌现一个半通明的灰色配景,(被批...),起先认为是outline作祟,减上后发明出反映,末了发明是tap后的配景下明,要重设那个] 做好的页面在手机端测试时,发现部分浏览器,tap后会出现一个半透明的灰色背景,(被批...),起初以为是outline作怪,加上后发现没反应,最后发现是tap后的背景高亮,要重设这个表现,则需要设置-webkit-tap-highlight-color为所需色彩,直接透明吧: a,img,butto

input中加入搜索图标

刚吃了一份宫保鸡丁刀削面,幸福感满满,写篇博客消耗一下热量. 今天工作遇到的一个问题是在input输入框中加入图标,当输入内容后,图标和提示语一起隐藏,类似于placeholder的功能.如淘宝页面,效果如下: 刚开始我以为是使用了placeholder,想了半天也不知道怎么把图标引入placeholder里面去,索兴打开淘宝页面,按下键盘上F12,跟随我一起来探索淘宝前端工程师不为人知的秘密吧,吼吼. 当然,我们不需要做的那么复杂,只要实现最基础的功能即可.我发现placeholder只是个假

input 垂直居中

热门专题