1.div设置flex布局

div{

    display: flex;

    align-items: center;

   }

2.div不要设置height,设置min-height

p标签在div中垂直居中，并且div高度随着p标签文字内容的变化而变化的更多相关文章

  1. 不定宽高的文字在div中垂直居中

    本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main">    <div id=&qu ...

  2. 设置span在div中垂直居中

    转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...

  3. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

  4. 没有高度的div中的子元素高度自动撑开

     直接上代码: 很多时候 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...

  6. 设置文字在div中垂直居中，使用line-height

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-19) line-height 行间距 详细使用方法:http://www.w3school.com.cn/css/pr ...

  7. 小的div在大的div中垂直居中

    方法一: 1.代码: <div style="width:200px;height:200px;border:solid blue;position:relative;"&g ...

  8. CSS-布局【1】-图片在div中垂直居中

    方法一:通过增加100%高度行内块居中对齐 <!DOCTYPE html> <html> <head> <meta name="viewport&q ...

  9. 小div在大div中垂直居中，以及div在页面垂直居中

    <html> <head> <title>淘宝 2faner</title> <style type="text/css"&g ...

随机推荐

  1. 转Genymetion

    http://www.cnblogs.com/rainboy2010/p/6387770.html 介绍 Genymotion是一款出色的跨平台的Android模拟器,具有容易安装和使用.运行速度快的 ...

  2. PCB规则设置

    规则设置

  3. POJ 2230 Watchcow(有向图欧拉回路)

    Bessie's been appointed the new watch-cow for the farm. Every night, it's her job to walk across the ...

  4. windows 2012安装不了KB2919355

    直接安装KB2919355会报错 “此更新不适用于你的计算机” 此时应先安装 KB2919442 https://www.microsoft.com/zh-cn/download/confirmati ...

  5. c#控件的动画显示效果

    1.  缘由: 项目中任务完成有个提示,需要以动画效果展示,其效果当如下图: 此为老项目为Delphi所写,改用c#实现,此效果做些设计.本也不难,小技而已,但为易于扩展,写了个静态类实现. 2. A ...

  6. jira与svn的调研

    centos7.3 + jira7.8.3 + svn 1.7.14 一.环境搭建 1.centos7.3环境搭建:(1)下载centos7.3的.iso文件 http://mirrors.aliyu ...

  7. bootstrap之双日历时间段选择控件—daterangepicker(汉化版)

    jQuerybootstrapdaterangepicker汉化版 双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自 ...

  8. MVC与WebApi中的异常统一处理

    1.简单例子 /// <summary> /// 全局页面控制器异常记录 MVC的异常处理 /// </summary> public class CustomErrorAtt ...

  9. xml转化为Dictionary

    代码 public SortedDictionary<string, object> FromXml(string xml) { SortedDictionary<string, o ...

  10. Vmware黑屏解决方法

    此原因是显卡性能差,显示选项开启了3D加速导致的,具体修改步骤: 英文路径:VM->Settings->Hardware->Display 在右面的内容栏中将 Accelerate ...