css flex布局实现文字垂直居中

css flex布局实现文字垂直居中<style>.innner{display:flex;background-color:#ea4d22;height:100px;/*line-height:100px;*//*text-align:center;*/justify-content:center;flex-direction:column;}.i.

大家好,又见面了,我是你们的朋友全栈君。

在没使用flex之前,垂直居中最常用的方法就是将容器的line-height设置为和容器一样的高度,但这种方法很生硬,每次需要更改容器高度的时候都需要考虑line-height,使用以下这种方法可以实现自适应的垂直居中!

<style>
    .innner { 
   
        display: flex;
        background-color: #ea4d22;
        height: 100px;
        /* line-height: 100px; */
        /* text-align: center; */
        justify-content: center;
        flex-direction: column;
    }

    .innner2 { 
   
        display: flex;
        background-color: #18a0c2;
        height: 100px;
        /* line-height: 100px; */
        text-align: center;
        justify-content: center;
        flex-direction: column;
    }

    .innner3 { 
   
        background-color: #20e64b;
        height: 100px;
        text-align: center;
    }
</style>
<div class="innner">垂直居中示例</div>
<div class="innner2">垂直水平居中示例</div>
<div class="innner3">水平居中示例</div>

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/135229.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 如何在电脑上画漫画 0基础_零基础学电脑快速入门

    如何在电脑上画漫画 0基础_零基础学电脑快速入门零基础怎么学漫画手绘?手绘漫画入门教程!想要创作手绘漫画,最重要的并不是画工技术,最重要的是学会如何讲故事,学习如何画分镜,提升个人在视频艺术方面的审美观,顺便一提,实际上天赋也是很重要的一点。当一个人的审美观达到一定程度时,对于创作本身理解的思维差异便于一般人不同了,一般人以为创作很简单,并不知道创作的难点,以为创作就是想写什么就写什么。日本画师Aちき的作品如果大家想要学习绘画的话,可…

  • Linux环境下MySql卸载[通俗易懂]

    Linux环境下MySql卸载[通俗易懂]MySQL的安装方法有很多种,常见的有yum、rpm和源码安装,那么针对不同的安装方法,也存在不同的卸载方法,其中yum和rpm安装的卸载方法一样。本节主要介绍Linux下如何彻底卸载已安装过的mysql,以便能顺利安装下一个版本的mysql。1、源码安装卸载虽然源码安装时相对复杂,但是它的卸载却很简单。只要在安装目录下直接执行makeuninstall这个命令,就可以卸载源码安装的mysql,前提是你在这之前没有执行过makeclean。如果执行过makeclean,也没关系,那就直

  • 十分钟免费拥有永久网站

    十分钟免费拥有永久网站在人人都会上网的信息时代,拥有属于自己的网站,已经不是什么稀奇的事情了。GithubPages就可以满足我们的需求了。它是github公司提供的免费的静态网站托管服务,用起来方便而且功能强大,不仅没有空间限制,还可以绑定自己的域名。一、注册github账户注册流程和其它平台一样。注册地址:https://github.com/join?source=logingithu…

  • AD域filter

    AD域filterAD域BuildingLDAPFiltershttp://flylib.com/books/en/1.434.1.37/1/ldapextensiblefilterhttp://ldapwiki.willeke.com/wiki/ExtensibleMatchhttp://ldapwiki.willeke.com/wiki/Active%20Direct

  • myeclipse8.5注册码在线生成_myeclipse注册码永久

    myeclipse8.5注册码在线生成_myeclipse注册码永久这几天myeclipse弹出注册码过期,去网上一搜,要么已过期,要么就剩一两个月。倒腾了半天,自己申请了几个注册码,给大家分享一下Subscriber:huazaiSubscriptionCode:uLR8ZC-855550-61565856301609203Subscriber:feifeiSubscriptionCode:sLR8ZC-855550-615658

  • compile ffmpeg for armv7 armv7s[通俗易懂]

    1.下载ffmpeggitclonegit://source.ffmpeg.org/ffmpeg.gitffmpeg2.下载gas-preprocessor地址: https://github.com/yuvi/gas-preprocessor下载完后把gas-preprocessor.pl复制到/usr/bin/目录下,修改权限 chmod7773.解压ffm

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号