行内元素居中

简介: 行内元素居中,通用处理办法给父元素添加一个行内块级元素,高度100%,且vertical-align设置为middle;所有的子元素vertical-align都设置为middle; ...

行内元素居中,通用处理办法

  1. 给父元素添加一个行内块级元素,高度100%,且vertical-align设置为middle;
  2. 所有的子元素vertical-align都设置为middle;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="box">
            <span>不喜欢写代码的程序不是好程序员</span>
            <input type="text" name="" id="" value="" />
            <input type="checkbox" name="" id="" value="" />
            <img src="img/timg.jpeg"/>
        </div>
    </body>
</html>

<style type="text/css">
    .box {
        border: 1px solid #999;
        height: 100px;
    }
    .box:before {
        content: '';
        display: inline-block;
        height: 100%;
        visibility: hidden;
        width: 10px;
        background: green;
        vertical-align: middle;
    }
    .box>* {
        vertical-align: middle;
    }
    input[type=text] {
        height: 30px;
    }
    input[type=checkbox] {
        height: 20px;
    }
    img {
        height: 50px;
    }
</style>
目录
相关文章
|
4月前
|
前端开发 C++ 容器
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
45 0
如何让一个盒子居中,解决盒子塌陷的方法
如何让一个盒子居中,解决盒子塌陷的方法
|
5月前
|
前端开发 容器
CSS布局基础:块级元素、行内元素与行内块元素详解
CSS布局基础:块级元素、行内元素与行内块元素详解
215 0
|
6月前
|
前端开发
什么是块级元素和内联元素?
【5月更文挑战第24天】什么是块级元素和内联元素?
64 4
|
5月前
|
前端开发 Ruby
行内元素有哪些?块级元素有哪些?行内块元素有那些?
行内元素有哪些?块级元素有哪些?行内块元素有那些?
38 0
|
6月前
|
Java
块元素、行内元素、行内块元素
块元素、行内元素、行内块元素
|
6月前
行内元素、块级元素、空元素的理解
行内元素、块级元素、空元素的理解
54 0
|
12月前
行内元素有哪些?块级元素有哪些? 行内块元素有那些?他们有什么区别?
行内元素有哪些?块级元素有哪些? 行内块元素有那些?他们有什么区别?
194 0
垂直居中 #32
垂直居中 #32
44 0
CSS3盒子居中模型,如何让盒子居中。
CSS3盒子居中模型,如何让盒子居中。
105 0
CSS3盒子居中模型,如何让盒子居中。