-
css设置按钮竖直方向居中_css如何设置垂直居中?
2020-12-30 19:33:08水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。一、采用 line-height 属性这种方式很常见,当 line-height 和...在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。
一、采用 line-height 属性
这种方式很常见,当 line-height 和 height 两个属性设置相同的高度时,该元素内部的文字将会居中。#parent {
height: 100px;
line-height: 100px;
border: solid 1px #333;}
优缺点:[优点]设置简单;
[缺点]只能对一行文字进行垂直居中;
二、采用 display:table-cell 和 vertical-align:middle
这种现实方式可以让标签元素以表格单元格的形式呈现,标签就像 table 中的 td,这样一来我们就可以通过vertical-align:middle这个样式使得其内部的元素居中显示。#parent {
height: 100px;
display: table-cell;
vertical-align: middle;
border: solid 1px #333;}
优缺点:[优点]设置多行文字居中;
[缺点]会被其它样式破坏例如:float、position:absolute;
三、采用 position: absolute 和 margin-top
通过绝对定位可以给元素设置距父元素上部top:50%,但是还没结束该元素还需要做一定的偏移才行,偏移量为该元素的一半高度margint-top:-height/2。#parent {
height: 100px;
position: relative;
border: solid 1px #333;}#child {
height: 20px;
margin-top: -10px;
position: absolute;
top: 50%;}
优缺点:[优点]居中元素对其它同级元素没有影响;
[缺点]子元素的高度需要固定;
四、采用 padding-top 和 padding-bottom
这种方式只需要将顶部和底部的padding设置同样高度就行。#parent {
padding-top: 20px;
padding-bottom: 20px;
border: solid 1px #333;}
优缺点:[优点]父级元素高度可变;
[缺点]父级元素高度可变;
-
CSS设置DIV居中
2015-10-11 21:12:38CSS设置DIV居中 body{ text-align:center; } .divs{ margin:0 auto; } CSS设置DIV居中CSS设置DIV居中
<style type="text/css"> body{ text-align:center; } .divs{ margin:0 auto; } </style> <body> <div class="divs">CSS设置DIV居中</div> </body>
-
css设置按钮竖直方向居中_CSS设置居中的方案总结-超全
2021-01-04 04:44:34块级元素居中 html代码部分<div class="parent"> <div class="child">child</div> </div>行内元素居中 html代码部分<div class="parent"> <span class="child">child</...块级元素居中 html代码部分
<div class="parent"> <div class="child">child</div> </div>
行内元素居中 html代码部分
<div class="parent"> <span class="child">child</span> </div>
水平居中
01 行内元素 text-align: center;
.parent { text-align: center; }
02 块级元素 margin: auto;
(低版本浏览器还需要设置 text-align: center;)
.parent { text-align: center; } .child { width: 100px; margin: auto; border: 1px solid blue; }
由于本文主要想记录的是垂直居中的方案,这里水平垂直的其他方案就不做过多记录了。
垂直居中
01 行内元素(单行文字垂直居中):设置 line-height = height
.parent { height: 200px; line-height: 200px; border: 1px solid red; }
02 块级元素:绝对定位(需要提前知道尺寸)
优点:兼容性不错
缺点:需要提前知道尺寸,margin-top: -(高度的一半); margin-left: -(宽度的一半);.parent { position: relative; height: 200px; } .child { width: 80px; height: 40px; background: blue; position: absolute; left: 50%; top: 50%; margin-top: -20px; margin-left: -40px; }
03 块级元素:绝对定位 + transform
优点:不需要提前知道尺寸
缺点:兼容性不好.parent { position: relative; height: 200px; } .child { width: 80px; height: 40px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: blue; }
04 块级元素:绝对定位 + margin: auto;
优点:不需要提前知道尺寸,兼容性好
缺点:这个方法是我最喜欢用的一个,要说缺点的话,我目前还不知道。.parent { position: relative; height: 200px; } .child { width: 80px; height: 40px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: blue; }
05 块级元素:padding
缺点:如果高度固定,需要提前计算尺寸(只在某些特定情况适用)。
.parent { padding: 5% 0; } .child { padding: 10% 0; background: blue; }
06 块级元素:display: table-cell
.parent { width: 600px; height: 200px; border: 1px solid red; display: table; } .child { display: table-cell; vertical-align: middle; } .parent { height: 300px; border: 1px solid red; display: table-cell; vertical-align: middle; /* *display: block; *font-size: (heightX0.873); *font-family: arial; */ }
同样适用于多行文字的垂直居中处理
HTML代码:
<div class="parent"> <span class="child">child child child child child child child child child child child child child child child child child child child childchild child child </span> </div>
CSS代码:
.parent { width: 400px; height: 300px; display: table-cell; vertical-align: middle; border: 1px solid red; } .child { display: inline-block; vertical-align: middle; background: blue; }
07 块级元素:display: flex
缺点:兼容性不好
.parent { width: 600px; height: 200px; border: 1px solid red; display: flex; align-items: center; justify-content: center; /*水平居中*/ } .child { background: blue; }
08 块级元素:伪元素
.parent { width: 300px; height: 300px; border: 1px solid red; text-align: center; } .child { background: blue; width: 100px; height: 40px; display: inline-block; vertical-align: middle; } .parent::before { content: ''; height: 100%; display: inline-block; vertical-align: middle; }
09 块级元素:calc()
也是个不错的方法。
缺点:兼容性较差,需要计算。.parent { width: 300px; height: 300px; border: 1px solid red; position: relative; } .child { width: 100px; height: 100px; background: blue; padding: -webkit-calc((100% - 100px) / 2); padding: -moz-calc((100% - 100px) / 2); padding: -ms-calc((100% - 100px) / 2); padding: calc((100% - 100px) / 2); background-clip: content-box; }
10 块级元素:inline-block
HTML代码:
<div class="parent"> <div class="child">child</div> <div class="brother">brother</div> </div>
CSS代码:
.parent { width: 400px; height: 400px; border: 1px solid red; position: relative; } .child, .brother { display: inline-block; vertical-align: middle; } .child { background: blue; font-size: 12px; } .brother { height: 400px; font-size: 0; }
其他
当然,还有一种方法,就是使用table布局:
<table> <tr> <td align="center" valign="middle">content</td> </tr> </table>
因为html还要加table等标签,冗余有点多,而且结构也改变了。
-
css设置图片居中
2020-04-17 11:36:00css设置图片居中 1. 首先要使图片居中的话要保证它为块级元素,(可通过css设置display为:block) 2.然后设置对应元素img的margin为auto,text-align为center 实现css代码如下: img{ display: block; margin: ... -
css设置按钮竖直方向居中_css怎么让按钮居中?
2020-12-21 15:25:45css让按钮居中的方法:将按钮放在一个div标签中,然后为div设置text-align:center;样式即可使div内按钮居中。css使按钮居中的方法示例:/*p,input,button{text-align: center;}*/div{text-align: center;}按钮居中 ... -
css设置居中
2019-03-13 20:57:47水平垂直居中 vertical-aligh: middle最常见垂直居中方法 前提条件:display:inline-block .out{ width: 300px; height: 300px } .in{ width: 50%; height: 50%; ... -
CSS设置居中
2018-11-16 21:00:46左右居中 display:flex; flex-direction:row; justify-content:center; 上下居中 display:flex; flex-dirction:column; justify-content:center; -
htmlbiaoge文字居中_css表格文字居中怎么设置?
2021-01-12 17:25:06css表格文字居中可以使用text-align属性来设置,对表格的table与td标签设置css样式为text-align:center;即可实现表格内文字居中。css表格中的文字是如何居中的:在开始我们先介绍个属性,就是这个属性才能使表格在... -
css设置图标居左_CSS设置图片水平居中
2021-01-14 10:33:450、背景我Windows平台上...因为它支持自定义css,所以,这里想通过设置css来实现图片的居中。1、需求首先要明白编辑器中,Markdown中对图片的处理,加入通过下面的markdown语法插入一张图片:行高上下居中样式效果。一、line-height行高语法 - TOPline-height:22pxdiv{line-height:22px}linet-height样式属性解析图line-... -
CSS居中设置
2018-09-23 16:56:44/*设置此属性才能水平居中*/ 22 width : 150px ; 23 height : 100px ; 24 background-color : red ; 25 } 26 27 28 29 class= "parent" > 30 class= "child" > ... -
css设置按钮竖直方向居中_CSS实现垂直居中的5种方法
2020-12-21 15:25:50利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面... -
html分页自适应居中;css设置分页自适应居中
2017-07-25 16:06:00制作网页列表的分页必不可少,显示的列表条数也不一样,让我们一起来看看如何让分页标签根据给定的分页自动居中呢。 对<ul>标签设置样式为:{ display: table margin:40px auto;} 对<li>标签设置样式... -
css设置按钮竖直方向居中_css实现垂直居中6种方法
2020-12-21 15:25:37在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题。1、如果是单行文本。看代码:Document#wrapper{width: ... -
css float 居中如何设置
2019-06-01 15:20:46float是没有设置居中center的值。一般使用float:left或float:right来实现并排形成居中效果。 通常有靠左、有靠右、有靠中的三列布局,其中最靠左布局设置float:left,最靠右布局设置float:right,当然中间对象盒子... -
Css元素居中设置
2015-09-01 17:52:00你对DIV CSS居中的方法是否了解,这里和大家...用CSS让元素居中显示并不是件很简单的事情,同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。... -
css 设置文本垂直居中
2018-12-21 17:37:00css设置文本垂直居中 垂直居中的高必须等于元素的高才能居中 如下图: 代码演示: div{ height:60px; } p{ line-height:60px; /*垂直居中的高必须等于元素的高才能居中*/ } 转载于:... -
css设置元素居中
2019-01-19 16:37:09方法一:子元素设置margin: 0 auto; 适用场景:子元素宽度已知 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">... -
CSS设置水平居中和垂直居中
2015-06-03 15:35:051.行内元素设置水平居中 通过设置父元素text-align:center2.定宽块状元素设置水平居中 通过设置“左右margin”值为“auto”来实现居中的。width:500px;/*定宽*/ margin:0px auto;/* margin-left 与 margin-right... -
div居中和内容居中的css属性设置
2019-12-25 09:12:31Div居中:margin:auto 0px; 内容居中:text-align:center; 【Java面试题与答案】整理推荐 基础与语法 集合 网络编程 并发编程 Web 安全 设计模式 框架 算法与数据结构 异常 文件解析与生成 Linux ...
-
[Mercury landing-水星迫降] v4.0.7z
-
MySQL NDB Cluster 负载均衡和高可用集群
-
MySQL 高可用工具 DRBD 实战部署详解
-
Liunx 优化思路与实操步骤
-
是什么影响了模具冲压件的回弹
-
用Go语言来写区块链(一)
-
MHA 高可用 MySQL 架构与 Altas 读写分离
-
个人发卡4套模板.zip
-
运维开发工程师(BKDS)理论基础
-
MySQL 高可用工具 heartbeat 实战部署详解
-
homelab_k3s_argocd:我的Homelab K3的ArgoCD回购-源码
-
ajax案例
-
X-CUBE-MCSDK-FUL_5.4.3.zip
-
牛牛量化策略交易
-
Redhat 6.8 Oracle Package Requirements.zip
-
node-cron:NodeJS的Cron-源码
-
PPT大神之路高清教程
-
leetcode刷题 剑指offer 双指针
-
2021 PHP租车系统 毕业设计 毕设源码 源代码使用教程
-
基于压缩空气储能(CAES)的风能存储调度优化