<!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. BZOJ 4555 Luogu P4091 [HEOI2016/TJOI2016]求和 (第二类斯特林数)

    题目链接 (luogu) https://www.luogu.org/problem/P4091 (bzoj) https://www.lydsy.com/JudgeOnline/problem.ph ...

  2. [LOJ3109][TJOI2019]甲苯先生的线段树：DP

    分析 首先,请允许我 orz HN队长zsy.链接 我们发现树上的链有两种类,一类是直上直下的,一类不是直上直下的(废话).并且,如果我们确定了左侧和右侧的链的长度和整条链上所有节点的编号之和,那么这 ...

  3. python学习之路（6）

    使用dict和set Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 举个例子,假设要根 ...

  4. C++入门经典-例2.16-隐式类型转换

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

  5. Spring的jsp标签库

    1,主要有两个 一个用于渲染HTML表单标签, 这些标签会绑定model中的某个属性 另一个包换了一些工具类标签 2,将表单绑定到模型上 包含了14个标签,海报一个人为用户展现错误的标签,它会将错误信 ...

  6. 【转】Java操作CSV文件导入导出

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  7. html外部文件读取/写入

    1.文件的读取 外部文件读取控件: <input type="file" id="file_jquery" onchange="file_jqu ...

  8. C# base64 加密解密

    1.base64  to  string string strPath = "aHR0cDovLzIwMy44MS4yOS40Njo1NTU3L1 9iYWlkdS9yaW5ncy9taWR ...

  9. iOS charts CombinedChartView First and last bars are shown half only

    charts 使用CombinedChartView 绘图时,发现第一个和最后一个bar只能显示一半的问题,解决方法: ChartXAxis *xAxis = chartView.xAxis; xAx ...

  10. 运行上次失败用例(--lf 和 --ff）

    前言 “80%的bug集中在20%的模块,越是容易出现bug的模块,bug是越改越多“平常我们做手工测试的时候,比如用100个用例需要执行,其中10个用例失败了,当开发修复完bug后,我们一般是重点测 ...