html关于input平行/垂直居中显示

类似某些网页搜索框平行且垂直居中显示的方法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{padding: 0;margin: 0;}div{width: 100%;border: 1px solid red;height: 100px;line-height:100px;text-align: center;}input{border: 1px solid #999;height: 40px;background: #FFFFFF;line-height: 40px;}</style></head><body><div><input /></div></body>
</html>

在input外面嵌套div，在div中垂直用height和line-height高相同，平行用text-align:center。

效果图如下：

vertical-align作用于行内元素，块元素和单元格中，不能垂直作用于块元素中。

html关于input平行/垂直居中显示相关推荐

easyui下拉框option写死_JavaScript_jQuery+easyui中的combobox实现下拉框特效，1.第一种写法：Input框中显示： - phpStudy...
jQuery+easyui中的combobox实现下拉框特效 1.第一种写法:Input框中显示: 2. 第二种用法,在list列表中显示: 类别 3. 第二种的另一种写法: 类别以上3种方法均可实 ...
解决ubuntu 18.04安装搜狗输入法在fcitx的add input method不显示
解决ubuntu 18.04安装搜狗输入法在fcitx的add input method不显示背景由于之前安装过搜狗输入法,但是总是在候选框出现乱码. 于是,就把搜狗输入法删除了,但是后面再安装 ...
html css实现文本水平垂直居中显示
这几天在工作中遇到了一个小问题:文本内容怎么能在div里水平垂直居中显示呢?同时群里的小伙伴恰巧也有提问这个问题的,所以我就总结了一下我知道的方法. 一.利用行高(line-height)和verti ...
html5怎么让图片垂直居中显示,css中如何实现图片垂直居中显示？
css中如何实现图片垂直居中显示?下面本篇文章就来给大家介绍一下使用CSS实现图片垂直居中的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 一.使用flex实现图片垂直居中利 ...
使用css3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
如何使img或者div在div中水平垂直居中显示
闲来无事,被人问到如何使img在一个div中垂直居中显示,自己就总结了如下几种方法,供大家参考: 方法一:在box中添加span空元素 <div id="box">&l ...
纯CSS如何让图片以及DIV垂直居中显示
图片,也就是img标签,行内元素:div,块级元素. 有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示(当然 ,这里我们抛开表格布局不谈,因为表格可以让内容自动垂直居中) 对于图片,如下 ...
图片右侧文字垂直居中显示
当需要将图片右侧文字垂直居中显示时,可以使用标签的align属性,将align设置为AbsMiddle 即可. align其他值的作用如下: AbsBottom 图像的下边缘与同一行中最大元素的下边缘 ...
仿抖音短视频APP源码html网页图片和文字水平居中垂直居中显示
div相对于页面水平居中显示: 核心代码:margin:0 auto: /意思为:div的外边距上下为0px,左右居中显示;/ /前提是position为相对定位;不能为absolute绝对定位/ * ...

html关于input平行/垂直居中显示

html关于input平行/垂直居中显示相关推荐

最新文章

热门文章