<!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. windows管理员权限激活

    第一步:计算机-右键--管理--选择用户,选择administrator用户--取消勾选:账户禁用 第二步:alt+ctrl+delete,快捷键调出资源管理器--点击切换用户 第三步:显示出现adm ...

  2. jenkins部署java项目

    #########################################jenkins部署#################################3 一.jenkins是什么? J ...

  3. LeetCode 409——最长回文串

    1. 题目 2. 解答 我们先来看一看回文子串的规律,如果回文子串的长度为偶数,那么其中所有的每个元素都出现了偶数次:如果回文子串的长度为奇数,那么有一个元素出现了奇数次而其余每个元素都出现了偶数次. ...

  4. Kotlin概述

    Kotlin 是一个基于 JVM 的新的编程语言,由 JetBrains 开发. Kotlin可以编译成Java字节码,也可以编译成JavaScript,方便在没有JVM的设备上运行. JetBrai ...

  5. 比较&关系运算符

    <1> 比较(即关系)运算符 python中的比较运算符如下表 运算符 描述 示例 == 检查两个操作数的值是否相等,如果是则条件变为真. 如a=3,b=3则(a == b) 为 true ...

  6. Python解决数据样本类别分布不均衡问题

    所谓不平衡指的是:不同类别的样本数量差异非常大. 数据规模上可以分为大数据分布不均衡和小数据分布不均衡.大数据分布不均衡:例如拥有1000万条记录的数据集中,其中占比50万条的少数分类样本便于属于这种 ...

  7. 阶段3 2.Spring_02.程序间耦合_7 分析工厂模式中的问题并改造

    循环打印 工厂了的打印先注释掉 打印出来了5次对象. 打印数字i同时,让i++操作.为了看他被常见了几次实例 调用保存的方法 没个都想都有一个唯一的实例.在创建对象的时候,重新初始化了i的值.所以i每 ...

  8. python的dict,set,list,tuple应用详解

    python的dict,set,list,tuple应用详解 本文深入剖析了python中dict,set,list,tuple应用及对应示例,有助于读者对其概念及原理的掌握.具体如下: 1.字典(d ...

  9. mysql linux环境

    创建新用户 create user jnroot@'%' identified by 'Yc@edc#sJn';创建数据库 create database price_monitor DEFAULT ...

  10. 【myeclipse2014-2017】使用相关

    1.窗口背景颜色修改 2.javascript代码块背景颜色修改 3.控制台颜色相关 4.myeclipse主题相关 5.myeclipse清除项目缓存 (1.删除work中的文件.2.删除wabap ...