input垂直居中，以及默认宽度的问题

houruyaogeili 2016-08-05 10:47:03

<div class="pulic-nav-search">
<input type="text" name="search" placeholder="搜索"/>
</div>

.pulic-nav-search{
position: relative;
float: right;
margin-top: 26px;
width: 160px;
height:32px;
line-height: 32px;
background: #f6f6f6;
padding-right: 34px;
}

.pulic-nav-search input{
height:32px;
border: none;
background: none;
outline: none;
padding-left: 5px;
}

问题1：line-height:32px;怎么input文本框位置偏下？设置line-height:26px;就正好，不设置也正好
问题2：input是否有默认的宽度？.pulic-nav-search设置了padding-right: 34px;后对他不起作用呢？

...全文

500 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

Leslie丶 2016-09-23

打赏
举报

引用 4 楼 hr201000800583 的回复:

引用 3 楼 buquan4041 的回复:
第一个问题你可以清除一下浏览器的margin和padding试试第二个问题很好验证，input有自己的默认宽高，你不设置值就可以看到。
谢谢，提问好久了，清除margin和padding的确应该，但是没有完全解决掉问题，因为input是替换元素，跟img一样有1px的空隙，把input设置成block或者设置浮动，问题就完美解决了，谢啦谢啦

没事，一起进步，我做后端，前端的知识有些生疏了。

houruyaogeili 2016-09-22

打赏
举报

引用 3 楼 buquan4041 的回复:

第一个问题你可以清除一下浏览器的margin和padding试试第二个问题很好验证，input有自己的默认宽高，你不设置值就可以看到。

谢谢，提问好久了，清除margin和padding的确应该，但是没有完全解决掉问题，因为input是替换元素，跟img一样有1px的空隙，把input设置成block或者设置浮动，问题就完美解决了，谢啦谢啦

Leslie丶 2016-08-10

打赏
举报

第一个问题你可以清除一下浏览器的margin和padding试试第二个问题很好验证，input有自己的默认宽高，你不设置值就可以看到。

houruyaogeili 2016-08-08

打赏
举报

引用 1 楼 masxq 的回复:

1、line-heigt是需要的，否则在IE7、IE8下文字不垂直居中； 2、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" />
<title>无标题文档</title>
<style>
.pulic-nav-search{
position: relative;
float: right;
margin-top: 26px;
width: 160px;
height:32px;
background: #f6f6f6;
}

 .pulic-nav-search input{
height:32px; 
border:1px solid #000;
background: none;
outline: none;
padding-left: 5px; 
padding-right: 35px;
line-height: 32px;
width:120px;
} 
</style>
</head>

<body>
<div class="pulic-nav-search">
<input type="text" name="search" placeholder="搜索" value="搜索关键词123"/>
</div>
</body>
</html>

谢谢，line-height不应该是line-height:32px;居中吗，怎么不居中呢

浪子回头8 2016-08-06

打赏
举报

1、line-heigt是需要的，否则在IE7、IE8下文字不垂直居中； 2、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" />
<title>无标题文档</title>
<style>
.pulic-nav-search{
position: relative;
float: right;
margin-top: 26px;
width: 160px;
height:32px;
background: #f6f6f6;
}

 .pulic-nav-search input{
height:32px; 
border:1px solid #000;
background: none;
outline: none;
padding-left: 5px; 
padding-right: 35px;
line-height: 32px;
width:120px;
} 
</style>
</head>

<body>
<div class="pulic-nav-search">
<input type="text" name="search" placeholder="搜索" value="搜索关键词123"/>
</div>
</body>
</html>

本课程是linux驱动开发的第8个课程，主要内容是linux的input子系统。学习本课程的目标是对input子系统的框架结构有深入理解，应用层和驱动层的调用关系和方法完全了解，能够自己移植按键等常见输入类设备的驱动。

CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position

canvas绘制字体偏上问题引入原因解决方法1.CanvasRenderingContext2D.measureText()方法语法参数返回值2.TextMetrics对象属性水平方向相关属性垂直方向相关属性引入在使用canvas绘制文字时，我其他使文字垂直居中，我是用的方法是设置textBaseline属性为middle，但该属性不同浏览器出现了不同的效果，在chrome上字体会靠上一些 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l5S62wqw-162858903

一、需求典型的注册页面设计一般是一个三列多行的表格，左列为表单项label，中列为文本框，右列为填写说明和验证提示。如下图因为整个表单的视觉重心在左中两列，所以在考虑表单整体相对页面水平居中和注册提交按钮的位置设计时，应当忽略掉右列。由此来说，右列显示的填写说明和验证提示应当以一个不影响前整体表格宽度的绝对定位来显示，并且需要显示在文本框的右侧垂直居中位置。二、...

本文将总结容器内文字以及容器本身在不同场景下要如何水平垂直居中 本文以span标签为例，总结所有场景的居中布局方式，父容器为body 根据视频课程纯手敲和实验，亲测有效，感谢老师 1 容器宽高自适应没有指定宽高内容撑开 1-1 内联元素，不能设置宽高，内容撑开 1-1-1 文字水平（容器内容）垂直居中 多行文本默认的内联元素是没有宽高的，根据内容自适应，所以不存在水平垂直居中问题内联元素的padding-top/padding-bottom属性不生效但是为什么input元素和textare类.