<!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. 论文阅读：OpenFlow: Enabling Innovation in Campus Networks

    摘要: 本白皮书提出了OpenFlow——研究人员在他们每天使用的网络中运行实验协议的一种方式. OpenFlow基于以太网交换机,具有内部流表以及用于添加和删除流条目的标准化接口.我们的目标是鼓励网 ...

  2. jquery 动态增加删除行

    最近写程序,碰巧有动态增加删除行,下面就记录一下 html就不写了,也没有什么,直接上核心了 新增行 function addRow(obj){ //获得table一共有多少行,方便追加的时候给序号赋 ...

  3. CentOS 6.5上的Tomcat启动报错问题

    最近在搭建虚拟机环境,装的是CentOSQL 6.5版本,然后装的OpenJDK1.7,在Apache下载了一个纯净的Tomcat放到虚拟机上启动报错了: 这里有两个错误: 1.第一个错误,APR的问 ...

  4. spark MLlib 概念 2：Stratified sampling 层次抽样

    定义: In statistical surveys, when subpopulations within an overall population vary, it is advantageou ...

  5. DAY 3模拟赛

    DAY3 钟皓曦来了! T1 网址压缩 [问题描述] 你是能看到第一题的 friends 呢.           ——hja 众所周知,小葱同学擅长计算,尤其擅长计算组合数,但这个题和组合数没什么关 ...

  6. 引用&指针交换函数实践

    实践如下: #include <iostream> using namespace std; // 普通交换,注意这里的ab值,在具体调用时是基本数据的拷贝,原始数据不会变化 // 因此这 ...

  7. sun.misc.BASE64Encoder 不建议使用java.sun自带包中的内容

    import sun.misc.BASE64Decoder; 在项目中,设计到64位编码的.有时开发会用到JDK中自带的BASE64工具.但sun公司是建议不这样做的.尤其是更新了JDK版本,项目甚至 ...

  8. Jmeter(九)集合点

    性能测试需要模拟大量用户并发,集合点能够尽量让虚拟用户同一时刻发送请求, 在Jmeter中集合点是通过定时器-同步定时器来完成的.

  9. CentOS7 通过 YUM 升级 VIM8

    Run 就完了: rpm -Uvh http://mirror.ghettoforge.org/distributions/gf/gf-release-latest.gf.el7.noarch.rpm ...

  10. k8s, etcd 多节点集群部署问题排查记录

    目录 文章目录 目录 部署环境 1. etcd 集群启动失败 解决 2. etcd 健康状态检查失败 解决 3. kube-apiserver 启动失败 解决 4. kubelet 启动失败 解决 5 ...