热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

文本以最小高度为中心并调整容器的高度

如何解决《文本以最小高度为中心并调整容器的高度》经验,为你挑选了1个好方法。

我正在尝试使用水平容器,填充可变大小的文本.如果文本很短,则容器应具有最小高度并垂直居中.如果文本较长,容器应增加其高度,保持垂直和底部边距.

我准备了一个jsfiddle 这个小提琴受到了这个答案的启发,也尝试display: table了这个答案和这一个



1> Gabriele Pet..:

您可以使用flexbox并使内容居中 justify-content

div.row {
  border: 1px dotted black;
  min-height:65px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
This is a case where we have a small text;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis felis ultricies fermentum elementum. Duis sollicitudin, ligula in posuere sagittis, nibh ex imperdiet ante, quis efficitur est nisl quis nulla. Donec pharetra feugiat arcu sed hendrerit. Integer aliquet porta erat, quis aliquet eros. Sed in pulvinar felis, eget lobortis dui. Vestibulum vitae imperdiet orci, in varius magna. Praesent venenatis, eros quis tristique accumsan, justo tellus tempus metus, vitae pellentesque nisl risus eu diam. Suspendisse lobortis ex et fringilla mattis.

推荐阅读
  • 在DIV内垂直居中UL - Centering Vertically an UL inside a DIV
    iamtryingtomakeanavigationmenuinsidea200pxx200pxsquare,thisnavigationlist(UL)chang ... [详细]
  • Go Cobra命令行工具入门教程
    本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中,如Kubernetes、Hugo和Github CLI等。通过使用Cobra,我们可以快速创建命令行工具,适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • 本文介绍了使用Spark实现低配版高斯朴素贝叶斯模型的原因和原理。随着数据量的增大,单机上运行高斯朴素贝叶斯模型会变得很慢,因此考虑使用Spark来加速运行。然而,Spark的MLlib并没有实现高斯朴素贝叶斯模型,因此需要自己动手实现。文章还介绍了朴素贝叶斯的原理和公式,并对具有多个特征和类别的模型进行了讨论。最后,作者总结了实现低配版高斯朴素贝叶斯模型的步骤。 ... [详细]
  • 这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读 ... [详细]
  • background:-webkit-gradient(linear,10%10%,100%100%, ... [详细]
  • 前端每日实战 2018年10月至2019年6月项目汇总(共 20 个项目)
    过往项目2018年9月份项目汇总(共26个项目)2018年8月份项目汇总(共29个项目)2018年7月份项目汇总(共29个项目)2018年6月份项目汇总(共27个项目)2018年5 ... [详细]
  • 1.CSS3透明度渐变(从左到右)#grad{background:-webkit-linear-gradient(left,rgba(198,226,255,1),rgba(19 ... [详细]
  • 很有意思的全景动画:(直接上代码)html部分:<div><div>css部分:.panorama{width:300px;hei ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程,将每个考题分配给3个独立的专家,如果他们的评分不一致,则需要请一位裁判做出最终决定。文章详细描述了评分规则,并给出了解决该问题的程序。 ... [详细]
  • 本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法,并给出了问题的解析和解决方法。详细介绍了问题的背景和规则,并给出了相应的算法解析和实现步骤。通过本文的解析,读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]
  • 本文讨论了使用差分约束系统求解House Man跳跃问题的思路与方法。给定一组不同高度,要求从最低点跳跃到最高点,每次跳跃的距离不超过D,并且不能改变给定的顺序。通过建立差分约束系统,将问题转化为图的建立和查询距离的问题。文章详细介绍了建立约束条件的方法,并使用SPFA算法判环并输出结果。同时还讨论了建边方向和跳跃顺序的关系。 ... [详细]
  • Tomcat/Jetty为何选择扩展线程池而不是使用JDK原生线程池?
    本文探讨了Tomcat和Jetty选择扩展线程池而不是使用JDK原生线程池的原因。通过比较IO密集型任务和CPU密集型任务的特点,解释了为何Tomcat和Jetty需要扩展线程池来提高并发度和任务处理速度。同时,介绍了JDK原生线程池的工作流程。 ... [详细]
  • 本文讨论了如何使用IF函数从基于有限输入列表的有限输出列表中获取输出,并提出了是否有更快/更有效的执行代码的方法。作者希望了解是否有办法缩短代码,并从自我开发的角度来看是否有更好的方法。提供的代码可以按原样工作,但作者想知道是否有更好的方法来执行这样的任务。 ... [详细]
author-avatar
kas8288408
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有