技术标签: html实现水平垂直居中
如何使用html+css实现元素的水平与垂直居中效果,这也是我们网页在编码制作中会经常用到的问题。
1)单行文本的居中
主要实现css代码:
水平居中:text-align:center;垂直居中:line-height:XXpx; /*line-height与元素的height的值一致*/
我们先来看这样一个例子,加入我们这里有一个div,宽度和高度为300px,背景颜色为黑色,然后在div中有一行简短文字,我们只需要使用line-height:200px;就可以实现文字的居中效果,具体的代码如下所示:
由上图可以看出我们实现了单行文字的垂直居中效果,但是很多时候我们的文字并不知道具体有多少,可能有一行,也可能有很多行,那么遇到多行文字的这种问题我们要如何处理呢。
2)多行文本的垂直居中
对于多行文本的垂直居中我们有很多种实现方式,我们这里逐个的来看一下;
1、使用display:table来实现
主要实现代码:
display: table使块状元素成为一个块级表格;
display: table-cell;子元素设置成表格单元格;
vertical-align: middle;使表格内容居中显示,即可实现垂直居中的效果;
具体的html与css的代码就如下所示:
2、使用absolute与transform配合实现
主要实现代码:
position:absolute; 首先给文本绝对定位;
left:50%;top:50%;transform:translate(-50%,-50%); 让文本距离盒子左边和上边分别为50%,再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了。
具体的html与css的代码就如下所示:
3、使用flex实现
主要实现代码:
display: flex;设置 display 属性的值为 flex 将其定义为弹性容器
align-items: center;定义项目在交叉轴(纵轴)上如何对齐,垂直对齐居中
justify-content: center; 定义了项目在主轴上的对齐方式,水平对齐居中
具体的html与css的代码就如下所示:
好了,本篇文章就给大家说到这里,大家自己动手写一下看能不能写出一样的页面效果出来,也可以找一些类似的页面自己练习一下。
html,将元素水平,垂直居中的四种方式
将元素垂直,水平居中分两种情况:一个是元素尺寸固定,二是元素尺寸不固定 一.尺寸固定 方法1:定位 ,50%,margin负距 .box{ width: 400px; height: 300px; b ...
DIV元素水平和垂直居中
在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...
让div等块级元素水平以及垂直居中的解决办法
一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...
CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
Java 数组元素逆序Reverse的三种方式
Java 数组元素逆序Reverse的三种方式 本文链接:https://blog.csdn.net/xHibiki/article/details/82930521 题目 代码实现 说明 int ...
让DIV水平和垂直居中的几种方法
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
【翻译】CSS水平和垂直居中的12种方法
英语原文链接 在CSS中有许多不同的方法能够做到水平和垂直居中,但很难去选择合适的那个.我会向你展示我所看到的所有的方法,帮助你在所面对的情境下选择最棒的那一个. 方法1 此方法将只能垂直居中单行文本 ...
[CSS] 子元素垂直居中的两种方式
1. 多个子元素水平并排,IE10以下失效 display: flex; align-items: center; justify-content: center; 2.多个子元素竖直排列,这种方式会 ...
随机推荐
Android Context 是什么?
andorid 开发(42) 版权声明:本文为博主原创文章,未经博主允许不得转载. [转载请注明出处:http://blog.csdn.net/feiduclear_up CSDN 废墟的树] PS ...
使用STS 创建spring配置文件
1.创建一个bean文件 2.输入文件名applicationContext.xml 3.这里会自动显示模板文件 4.创建后,自动填充头不定义 到这里就可以发现,我们创建spring文件时,需要的配置 ...
漫谈程序猿系列:她发现了一个Bug……
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZm9ydW9r/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...
ubuntu环境下lnmp环境搭建(3)之Php
1.lnmp详细 http://www.discuz.net/thread-3513107-1-1.html 2. 到php目录 http://blog.aboutc.net/linux/65/co ...
less命令查看文件时的常用操作
下键或者回车:往下一行 D:往下半页 空格和f:往下一页 上键:往上一行 B:往上一页 shift+G:直接切到末尾 ?+搜索条件:从下往上搜索 /+搜索条件:从上往下搜索
MongoDB在windows上的安装
D:\MongoDB\Server\4.0\bin 下载地址:https://www.mongodb.com/download-center/community 中文教程:http://www.run ...
Pick-up sticks
Pick-up sticks Stan has n sticks of various length. He throws them one at a time on the floor in a r ...
flex-direction
[flex-direction] The flex-direction CSS property specifies how flex items are placed in the flex con ...
ORA-01403:no data found 解决办法
原因:select a into b from table:当查询出来的a没有数据时,这个时候就会抛出这个异常:ORA-01403:no data found 解决方法: 先定义一个整形变量,coun ...
2017 ACM-ICPC 亚洲区(西安赛区)网络赛 xor (根号分治)
xor There is a tree with nn nodes. For each node, there is an integer value a_iai, (1 \le a_i \le ...
文章浏览阅读3.5k次。扫描可用WiFi网络及WiFi信号强度检测NodeMCU-32S 最强的ESP32 开发板非盗版或副厂的CH340 WiFi 蓝牙ESP-32 可用Arduino IDEESP32-S 是一款通用型WiFi-BT-BLE MCU模组,功能强大,用途广泛,可以用于低功耗传感器网络和要求极高的任务,例如语音编码、音频流和MP3解码等。此款模组的核心是ESP32芯片,具有可扩展、自适应的特点。两个CPU核可以被单独控制或上电。时钟频率的调节范围为80 MHz到240 MHz。用户可以切断CPU的电源,利用低_esp32 wifi信号强度
文章浏览阅读689次。我做一个项目,出现了错误,如下。
文章浏览阅读4.1k次,点赞5次,收藏28次。置顶/星标公众号,不错过每一条消息! 今天分享的关于时钟知识,可能很多人没有在意过。这也是之前有朋友问过的问题,这里就简单给大家普及一下吧。1RCC时钟说明在STM..._时钟复位和时钟使能
文章浏览阅读1.5k次,点赞3次,收藏6次。下载:IDM v6.38.7.2 中文绿色特别版https://eli08.118pan.com/b1064872密码:ye79下载: IDM 6.39.7.3https://eli08.118pan.com/b1064872密码:ye79下载好后先点击绿化,然后在点击后缀exe文件进入软件后设置一下这里要改为:softxm;netdisk这里最好设置为4这要就差不多了..._idm_v6.38.7.2
文章浏览阅读894次。JetBrains产品字体大小调整,如:IDEA,Pycharm的字体大小调整_jetbrains字体大小设置
文章浏览阅读5.3w次,点赞225次,收藏2k次。常用网络协议前言TCP/IP五层网络模型回顾应用层协议DNS协议:HTTP协议HTTPS协议传输层协议UDP协议TCP网络层IP协议ICMP协议数据链路层ARP协议物理层整体的网络传输流程前言本篇博客将对基于 TCP/IP的五层网络模型 中的常见协议做以总结 ,目的通过这些具体的协议更深刻的认识整体网络的传输流程及相关网络原理TCP/IP五层网络模型回顾应用层:为用户为用户的应用进程提供网络通信服务协议——DNS协议、HTTP协议、HTTPS协议传输层:负责两台主机之间的数据传输,将数据从发_网络协议
文章浏览阅读120次。背景:偶然看到一个人的自动化框架的测试报告好漂亮,心痒痒,今天弄了一下午,还是不行,结果到现在就现在,我特么成功了,不为什么Mark一下:本地化修改获取源码,修改reportng.properties文件,reportng.properties中的内容是键值对,修改后面的值为中文即可。其他视情况做改变。passed=通过修改测试结果顺序需要修改TestResultCompa..._reportng测试报告美化
文章浏览阅读6.9k次。乐知学堂学友来函系列为学员们提出的典型热点问题,我们的教师和学习顾问都给出了精心的回答,乐知学堂会定期发布学友来函,希望能够为更多的学习者解除学习中的困惑。———————————————————————————————————————————————————————学员:徐豫锋 时间:2008-11-29 随着手机的普及,利用手机移动上网已经越来越普及,应用也越来越多。问_移动开发前景csdn
文章浏览阅读696次,点赞20次,收藏23次。In this paper, we present a method to optimize Gaussian splatting with a limited number of images while avoiding overfitting. Representing a 3D scene by combining numerous Gaussian splats has yielded outstanding visual quality. However, it tends to overfit
文章浏览阅读1.1k次。下载安装包http://pulsar.apache.org/en/download/使用tar -zxvf解压下载的资源包,目录结构如下显示目录:本地单点运行,使用命令./pulsar standalone即可,这里使用默认配置,暴露端口为6650测试消息发送消息 命令./pulsar-client produce my-topic --messages ..._pulsar 2.4.2架包支持服务版本
文章浏览阅读855次。choice( seq )注意:此函数是无法直接访问的,所以我们需要导入random模块,然后我们需要使用random对象来调用这个函数。参数seq -- 这可能是一个列表,元组或字符串...返回值该方法返回一个随机项。例子下面的例子显示了choice()方法的使用。#!/usr/bin/pythonimport randomprint "choice([1, 2, 3, 5, 9]) : ", ..._pytorch中choice
文章浏览阅读2.8w次,点赞3次,收藏3次。Chen Sam ,一个空号。355 人赞同-- 2015.12.28. 一个圣诞节长周末多了100个赞..What's going on here..感恩。有同学私信说需要详细步骤的做饭教程,但是这里篇幅太局限了..如果开一个微信公众号什么的有人会想看吗?第一次认认真真地在知乎回答问题。在美帝读了两年书,除了学术最多的时间就花在做饭上了。回答里有很多很多图..大约