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. Delphi: 圆形进度(环形进度)

    起源: 重回DC5项目,资源下载美工提供圆形进度条,复习Delphi,为实现其颇觉有趣,遂研究其. 最终效果图如下: 实现: 制作TCircleProgress控件,实现方法参照系统之TGauge控件 ...

  2. c#: 判断Firefox是否安装

    1.源起: KV项目需要给浏览器安装下载插件,就需要判断是否安装对应浏览器,发现判断卸载目录方法,32位程序在.net 2.0运行环境下,常规方法不能访问64位注册表位置,导致不能判断. 2.卸载键值 ...

  3. Django的rest_framework的序列化组件之序列化多表字段的方法

    首先,因为我们安装了restframework,所以我们需要在django的settings中引入restframework INSTALLED_APPS = [ 'django.contrib.ad ...

  4. Django的Modelforms的介绍

    from django.forms import ModelForm class Test(ModelForm): # 把那张表转化成form组件 class Meta: # 这个意思即是把Artic ...

  5. Xcode9 打包ipa(导出ipa测试包)时总是意外退出

    今天用xcode9,打包ipa总是意外退出. 正处在测试阶段,所以打的也是测试包 ,路径是:Product -> Archive -> Export -> Save for Ad H ...

  6. 7-OKHttp使用详解，步骤挺详细的，适合初学者使用！

    OKHttp使用详解,步骤挺详细的,适合初学者使用! 一,OKHttp介绍 okhttp是一个第三方类库,用于android中请求网络. 这是一个开源项目,是安卓端最火热的轻量级框架,由移动支付Squ ...

  7. 【RabbitMQ】——5种队列(转)

    原文地址:https://blog.csdn.net/u012654963/article/details/76417613 应用RabbitMQ,我们可以根据需求选择5种队列之一. 一.简单队列 P ...

  8. ajax添加header信息

    $.ajax({url:"xxx",async:true,dataType:"json",contentType:"application/json& ...

  9. 梦殇 chapter six

    如行尸走肉般的坐在教室,看著书上密密麻麻的字,心却久久不能平静. 自己已经不再是当初那个懵懂,无知的小女孩了.仰望天空45度,让眼泪流回眼睛. 是该告别彷徨,告别懵懂的年纪了. 早些年许下的诺言,如今 ...

  10. hdu 4004 (二分加贪心) 青蛙过河

    题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4004 题目意思是青蛙要过河,现在给你河的宽度,河中石头的个数(青蛙要从石头上跳过河,这些石头都是在垂 ...