<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            *{margin: 0;padding: 0}

            .box{width:800px;height:100px;background:#ccc;text-align: center}

            .box p {margin:0;padding:0;display: inline-block;vertical-align: middle;text-align: left}

            #liu_area{display: inline-block;height:100%;vertical-align: middle;}

            #p_span{display: block}

        </style>

    </head>

    <body>

        <div class="box">

            <p>

                <span id="p_span">第一行</span>

                <span id="p_span">第二行</span>

            </p>

            <span id="liu_area"></span>

        </div>

    </body>

</html>

　　效果图如下：

p标签在div中水平垂直居中且文本左对齐的更多相关文章

  1. img标签在div中水平垂直居中--两种实现方式

    第一种方式: text-align:center; vertical-align:middle; div{ text-align: center; vertical-align:middle;widt ...

  2. 【div+css】两个div，如何让内层的div在外层div中水平垂直居中

    好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...

  3. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  4. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  5. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  6. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  7. div+css:div中图片垂直居中

    div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  8. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  9. div盒子水平垂直居中的方法推荐

    父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...

随机推荐

  1. 分治NTT：我 卷 我 自 己

    感觉这种东西每次重推一遍怪麻烦的,就写在这里了. 说白了就是根据分治区间左端点是否为\(0\)分类讨论一下,一般是如果不是\(0\)就要乘\(2\),不过还是需要具体问题具体分析一下才好(就比如下面的 ...

  2. JavaWeb_(MVC)管理员后台商品查询demo

    MVC分层实现管理员后台商品查询 MVC层即model view controller Model(模型):模型代表着核心的业务逻辑和数据(不要理解成Model只是实体类) View(视图):视图应该 ...

  3. js+jq 淡入淡出轮播（点击+定时+鼠标进入移出事件）

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  4. Ubuntu 16.04配置SSL免费证书

    主要参考地址为:https://blog.csdn.net/setoy/article/details/78441613 本篇主要以Apache这个web服务器来讲解,所以前提必须要安装好apache ...

  5. VMware与Centos系统

    今日任务 1.Linux发行版的选择 2.vmware创建一个虚拟机(centos) 3.安装配置centos7 4.xshell配置连接虚拟机(centos) 选择性 pc可以选择 -纯系统 Lin ...

  6. 出现org.maven.ide.eclipse.MAVEN2_CLASSPATH_CONTAINER， 且出现无法找到Maven的依赖的问题

    解决方案:Build Path -> Java Build Path ->Libraries ->Add Library ->Maven Managed Dependences ...

  7. 20175212童皓桢 实验三敏捷开发与XP实践实验报告

    20175212童皓桢 实验三敏捷开发与XP实践实验报告 实验内容 XP基础 XP核心实践 相关工具 实验步骤 一.Code菜单功能的研究 Move Line/statement Down/Up:将某 ...

  8. Linux高级调试与优化——进程管理和调度

    进程管理 进程和文件是Linux操作系统的两个最基本的抽象. 进程是处于执行期的程序,进程不仅仅局限于一段可执行程序代码,通常还包含其他资源,如打开的文件.挂起的信号.内核内部数据.处理器状态.进程地 ...

  9. Mysql的BTREE和HASH索引

    建议默认使用BTree索引,如果时间太长,可以尝试HAST索引,但限制如下: 不支持between and 只支持 = IN <> 不支持范围查询如between and和like. 无法 ...

  10. 清明　DAY 3

    ans=1000*4 分别固定千位,百位,十位,个位为1,其余位置随便排 对于每一个质因数的n次方,共有n+1中选择方法,即这个质因数的0~n次方 故共有   4*3*5=60  种方法 (1)取两册 ...