html居中

垂直居中的图片的高度也不确定

由 可紊 提交于 2020-04-08 04:43:25
在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title> <style type="text/css"> body {height:100%;} #box{ width:500px;height:400px; display:table; text-align:center; border:1px solid #d3d3d3;background:#fff; }

css实现图片的上下、左右居中的两种方法

由 故事扮演 提交于 2020-03-27 15:30:41
实现图片的上下、左右居中的两种方法 方法一：利用 vertical-align 属性实现图片上下居中 先设置父元素样式 text-align : center，实现图片左右居中，给图片添加一个同级的span标签，设置宽度为零，高度100%，两者都设置 display : inline-block; vertical-align : middle，即可实现图片上下居中，具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 图片上下左右居中 </title> <style> .box{ width : 400px; height : 300px; border : 1px #000 solid; margin : 40px auto; text-align : center; } .box img{ display : inline-block; vertical-align : middle; } .box span{ width : 0; height : 100%; display : inline-block; vertical

flex布局垂直居中

由 旧街凉风 提交于 2020-03-26 17:44:05
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ display: flex; display: -webkit-flex; border: 1px solid #0000FF; height: 200px; width: 400px; align-items:center; justify-content:center; } .item{ width: 50px; height: 40px; border: 1px solid #00C1B3; } </style> </head> <body> <div id="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body> </html> 来源： https://www.cnblogs.com/xm666/p/11053220.html

【前端面试CSS】—垂直水平居中终极版

由 允我心安 提交于 2020-03-26 16:59:08
前言： 居中元素一直是前端ers绕不过去的坎儿，各种面试中经常出现，一起做一个总结，欢迎补充~ 以下分别会介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： 一、水平居中 1.行内元素水平居中 利用 text-align: center 可以实现在块级元素内部的行内元素水平居中 。此方法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。 .parent{//在父容器设置 text-align:center; } 此外，如果块级元素内部包着也是一个块级元素， 我们可以先将其由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中 。 <div class="parent"> <div class="child">Demo</div> </div> <style> .parent{ text-align:center; } .child { display: inline-block; } </style> 2.块级元素的水平居中 这种情形可以有多种实现方式: ①将该块级元素左右外边距margin-left和margin-right设置为auto .child{ width: 100px;//确保该块级元素定宽 margin:0 auto; } ②使用table+margin

css 实现垂直居中

由 孤人 提交于 2020-03-26 05:04:11
在前端开发中，实现水平居中很容易，一般实现方式：给元素margin:0 auto; 但是垂直居中就不那么好控制了。 怎么样垂直居中呢？ 这里可以用到position属性， 　　假设有如下结构 　　HTMl:　 <div class="father"> <div class="child"></div> </div> 　　CSS .father{ width:500px; height:500px; position:relative; background-color:green } .child{ position:absolute; width:200px; height:200px; top:50%;/*********************这里是关键*********/ margin-top:-100px;/**************向上修正为元素的一半**********/ background-color:red; } 　　这样就可以实现垂直居中。当然margin-top：-150px也可以使用css3中transform：translateY（-150px）修正，但是，css3毕竟有些许的兼容问题。 来源： https://www.cnblogs.com/webfullstack/p/5282394.html

移动端常见问题（水平居中和垂直居中）

由 ぃ、小莉子 提交于 2020-03-17 17:21:39
先准备个测试模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .bg{ width:100%; height:100%; position: fixed; top:0; right:0; bottom:0; left:0; background-color: lightblue; } .text{ background:#fff; border-radius: 5px; } </style> </head> <body> <div class="bg"> <span class="text">单行文字水平垂直居中</span> </div> </body> </html> 内联元素，没有设置宽高 1、自身水平垂直居中 设置padding （左右方向有效，上下方向无效） 2、在容器内水平垂直居中 方法一： position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); 方法二：flex布局（适合移动端） display:

margin:0 auto;无法居中怎么办？

由 丶灬走出姿态 提交于 2020-03-14 07:54:11
很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0 auto;却没有效果，不能居中的问题！margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，呵呵！小一在这里说两个典型的错误引起的不能居中的问题： 1、没有设置宽度 <div style="margin:0 auto;"></div> 看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！ 2、没声明DOCTYPE ①DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分！ ②看看下面的代码，是不是很熟悉？像这样的，在文档最顶端，所有代码之上的乱七八糟的东西，就是用来声明DOCTYPE的！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ③你有三种选择，用来声明DOCTYPE * 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识

css 文字垂直居中问题

由 我怕爱的太早我们不能终老 提交于 2020-03-11 13:11:36
CSS 文字垂直居中问题 问题：在 div 中文字居中问题： 当使用 line-height：100%%; 时，文字没有居中，如下： html: <div id="header_logo_des"></div>CSS: #header_logo_des{ width: 100%; height: 100%; font-size: 28px; text-align:center; line-height: 100%; /*设置line-height与父级元素的height相等,不能使用%；*/ } 但结果如下： 原因： line-height 属性设置行间的距离（行高） 1. 不能为负值； 2. 最好设置为具体像素值，如：line-height: 60px; 3. 在大多数浏览器中默认行高大约是 110% 到 120%; 解决办法： 1. 使用像素值: eg: line-height: 60px; // 60px， 是当前 div 的高度 2. 使用 %： eg: line-height: 200%; // 调高百分比 3. 不再使用 div 直接写文字，可使用其他内联标签包含文字，eg: <span> HTML： <span>岁月静好</span> CSS: span{ font-size: 28px; display: block; //内联元素--块级化 text-align:

CSS的水平居中和垂直居中方式

由 眉间皱痕 提交于 2020-03-08 22:02:28
水平居中 1.行内元素或行内块元素水平居中，即给其父元素添加text-align：center 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 * { 10 padding: 0; 11 margin: 0; 12 } 13 14 .wrapper { 15 height: 400px; 16 background-color: pink; 17 text-align: center; 18 } 19 </style> 20 </head> 21 22 <body> 23 24 <div class="wrapper"> 25 <span class="center">text-align：center</span> 26 </div> 27 28 </body> 29 30 </html> 2.块级元素水平居中可以用margin：0 auto 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta

DIV未知高度的垂直居中代码

由 白昼怎懂夜的黑 提交于 2020-03-08 08:03:49
代码 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < title > Vertical centering in valid CSS </ title > < style type ="text/css" > body { padding : 0 ; margin : 0 ; font-size : 75% ; line-height : 140% ; font-family : Arial, Helvetica, sans-serif ; } body,html { height : 100% ; } a { color : #333 ; } a:hover { color : green ; } #outer { height : 100% ; overflow : hidden ; position : relative ; width :
订阅 html居中