<!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. python3.6+Xadmin2.0系列（一） xadmin下载及安装

    环境配置:win7+python3.6+Django2.1+xadmin2+PyCharm 一.Xadmin下载及安装: 1.下载: 下载地址:https://github.com/sshwsfc/x ...

  2. vue router 报错：NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}

    https://blog.csdn.net/weixin_43202608/article/details/98884620

  3. Js基础知识（二） - 原型链与继承精彩的讲解

    作用域.原型链.继承与闭包详解 注意:本章讲的是在es6之前的原型链与继承.es6引入了类的概念,只是在写法上有所不同,原理是一样的. 几个面试常问的几个问题,你是否知道 instanceof的原理 ...

  4. C++入门经典-关于extern变量

    1:extern用于解决使用非本源文件的全局变量. 例如:在sample1.cpp中 int a,b; /*外部变来那个定义*/ char c; void main() { cout<<a ...

  5. C++入门经典-例3.18-使用for循环计算从1到10的累加

    1:代码如下: // 3.18.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...

  6. ANR错误分析

    链接1:https://www.cnblogs.com/xiyuan2016/p/6740623.html 链接2:https://www.jianshu.com/p/3959a601cea6

  7. Redis 配置 CONFIG 命令

    redis.conf 文件在 安装目录下 CONFIG 命令查看或设置配置项 先登陆 src/redis-cli -a -a 后面是密码,默认为空,没有密码直接登陆 src/redis-cli 1.查 ...

  8. android 给控件使用自定义字体Typeface

    第一步:将字体资源放在assets 资源文件夹下: 第二步:获取字体资源 Typeface mTf = Typeface.createFromAsset(c.getAssets(), "Op ...

  9. git clone的代码没有前端代码

    需要切换到文件夹目录下,然后 git checkout dev 切换到开发环境(其实是切换到了dev分支) 后来查看分支,发现有两个分支:master 和 dev . ================ ...

  10. Python学习笔记：time模块的使用

    在使用python的过程中,很多情况下会使用到日期时间,在Python的自建函数中,包含time模块,用来处理与日期时间相关的功能. 1.time.time() time():不能传参数 用来获取时间 ...