div中多行内容垂直居中显示

一、css 样式

    .wrap {

      height: 200px;

      width: 200px;

      border: 1px solid #232323;

      display: flex;

      justify-content: center;

      flex-direction: column;

    }

二、效果图

三、完成代码示例

<html>

<header>

  <title>div中内容垂直居中</title>

  <style>

    .wrap {

      height: 200px;

      width: 200px;

      border: 1px solid #232323;

      display: flex;

      justify-content: center;

      flex-direction: column;

    }

  </style>

</header>

<body>

  <div class="wrap">

    <span>显示内容1</span>

    <span>显示内容2</span>

  </div>

</body>

</html>

div中多行内容垂直居中显示的更多相关文章

  1. IE8下div中2个button仅仅显示一个

    IE8下div中2个button仅仅显示一个,代码例如以下: <div id="adviceType" style="display: none;" &g ...

  2. 读取memo中某行内容

    方法1 可用以下代码读取Memo中指定行的内容: var   aLine:String; begin   aLine:=Memo1.Lines[2]; end; 在使用中,读取的行在Memo中需要保证 ...

  3. div中文字水平和垂直居中的css代码

    HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px so ...

  4. [daily][troubleshoot][archlinux][wps][font] wps文档中的图内容无法显示中文

    序 用linux作为工作生产环境的几个需要解决的问题之一是:文档协作,即如何兼容Micro$oft Office格式的文档. 我一般的工作方式是:在linux下创建一个win7的虚拟机,安装常用的wi ...

  5. ASP.NET中读取excel内容并显示

    项目中经常会用到把excel的文件内容导入到数据库中的,刚刚花了点时间,做了个例子,基本上能实现导入Excel后显示的功能吧,导入的excel文件得是xls,即是2003的.     代码思路如下:要 ...

  6. 让块元素在div中水平居中，并且垂直居中的五种方法

    在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...

  7. div中文本水平居中，垂直居中

    div: text-align=center; hight=100px; line-hight=100px;(行高需要和高度设置成一样)

  8. html如何让label在div中的垂直方向居中显示？

    设置label的行高 line-height 和div的高度一致即可.

  9. 使用window.getSelection()获取div中选中文字内容及位置

    div添加一个弹出事件: $(document).ready(function () { $("#marked-area").mouseup(function (e) { $sco ...

  10. 仅支持webkit浏览器的多行内容超出显示省略号

    .box { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; ...

随机推荐

  1. java将list中某个元素放在首位

    java将list中某个元素放在首位 1 List<Example> example = exampleRepository.list(); 2 3 //将list里的某个字符串默认排列在 ...

  2. boltdb一瞥

    boltdb 网上关于boltdb的文章有很多,特别是微信公众号上,例如: boltdb源码分析系列-事务-腾讯云开发者社区-腾讯云 (tencent.com) 这些文章都写的挺好,但不一定覆盖了我所 ...

  3. 解决方案 | pyautogui实现等待特定图片（对话框）出现（可设置等待超时时间）

    1.问题 为了等待某个[转换完毕]的图片(对话框)出现,如何设置? 2.解决方案代码如下 下面代码实现的是:设置超时时间为10s,当你在完成前序工作以后,代码开始进入等待,一旦你的特定图片出现了,马上 ...

  4. TIER 1: Crocodile

    TIER 1: Crocodile nmap 在前几次练习中,我们已经熟悉 nmap 扫描,我们在本次靶机中使用继续使用 nmap 进行扫描. 扩充我们的知识库:-sC 选项启用了 Nmap 的默认脚 ...

  5. LRZ

    1.在平面直角坐标系中,已知点 \(A(-2,2).B(3,4).C(0,1)\),直线 \(y=kx+b\) 过点 \(C\) 且与线段 \(AB\) 有交点,则 \(k\) 的取值范围是_____ ...

  6. Redis持久化RDB与AOF介绍

    就是将内存中的数据通过rdb/aof进行持久化写入硬盘中 rdb就是进行持久化的快照 在指定的时间间隔内,执行数据集的时间点快照.这个快照文件称为(dump.rdb)RDB文件,Redis DataB ...

  7. AI/机器学习（计算机视觉/NLP）方向面试复习1

    1. 判断满二叉树 所有节点的度要么为0,要么为2,且所有的叶子节点都在最后一层. #include <iostream> using namespace std; class TreeN ...

  8. （一）MOngoDB的安装与配置（Windows和Centos）

    其实Windows的安装没有什么难的,主要是后的Centos下的安装,我是在centos7上安装测试的,不管是手动安装还是脚本安装我都是成功才发出来的,有什么的问题可以留言,写博客只是为了记录和简单的 ...

  9. 【SqlServer】01 概念及笔记

    视频地址: https://www.bilibili.com/video/BV1qW411y7Bq 一.什么是数据库? 狭义定义: 数据仓库 广义定义: 对数据进行存储和操作的软件,和数据本身合并称为 ...

  10. 【转载】 PID算法的解析

    原文来自DF创客社区地址:http://www.dfrobot.com.cn/community/thread-14783-1-1.html ----------------------------- ...