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. Codeforces Beta Round #46 (Div. 2)

    Codeforces Beta Round #46 (Div. 2) http://codeforces.com/contest/49 A #include<bits/stdc++.h> ...

  2. Git之生成SSH公钥

    一 生成公钥 ssh-keygen -t rsa -C "michelangelo@qq.com" -t :密钥类型. -C :  注释.通常用作密钥的名字. 依次按三次回车:默认 ...

  3. vue初学：基础概念

    一.vue使用步骤: 1.引包vue.js 2.html中写要操作的DOM节点 3.创建vue对象:new Vue({options}); 4.配置options:el:(要操作的对象,用选择器,同j ...

  4. 成对使用new和delete，传值传引用

    首先: delete []p;是用来删除对象数组的,特别是你声明的是对象数组!!! 如果new中用了[],delete一定要用[]:在new中没有使用,在delete中一定不要使用. 其次: 当你使用 ...

  5. git 忽略 IntelliJ .idea文件

    git 忽略 IntelliJ .idea文件 2016年10月22日 11:31:27 阅读数:6196 标签: git 更多 个人分类: git   版权声明:本文为博主原创文章,未经博主允许不得 ...

  6. webpack(一） 安装使用 之css使用注意

    在webpackDemo 文件夹中新建 style.css,index.html style.css 中将背景色设为红色. body{ background-color: red; } he'llWo ...

  7. JQuery UI之Autocomplete(1)入门程序

    1.Autocomplete的主要属性:source:即为指定智能提示下拉框中的数据来源,支持三种类型.  Array,主要用于本地化数据提供,支持两种格式:字符串数组 [ "Choice1 ...

  8. 微信小程序模板中使用循环

    原创文章 本篇介绍如何在模板里使用循环. 方法一: template.wxml,该文件内容为: <template name="msgItem1"> <block ...

  9. ifconfig 运行command not found

    vi /home/lx/.bash_profile中添加 PATH=$PATH:$HOME/bin:/sbin:/bin export PATH   linux查看服务自启动  chkconfig - ...

  10. go语言中的坑

    package main; import ( "fmt" "time" "sync" ) //修改slice的坑 func add(s [] ...