div内容居中和布局居中样式总结

1.div的内容居中

(1)水平居中

<div align="center"><button>按钮></button></div>

CSS:

div{display: block;  // div默认为块级元素,如果是第三方控件或继承父类元素不是block,则需要指定(必要时提高优先级)text-align: center;
}

(2)垂直居中

设置line-height等于height即可(当line-height为百分比时是相对于字体而言)。

2.div的布局居中

div css网页布局居中的条件:

1、对body设置CSS内容居中样式text-align:center,代码:body{ text-align: center; }
2、对最外层布局对象设置margin:0 auto样式,代码:.div-container{ margin: 0 auto; }

如果父级元素不是内容居中的或者为宽度不固定元素,仅仅设置布局对象的左右margin为auto往往无效。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/440201.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【HDU - 6349】三原色图(最小生成树,思维,tricks)

题干&#xff1a; 度度熊有一张 nn 个点 mm 条边的无向图&#xff0c;所有点按照 1,2,⋯,n1,2,⋯,n 标号&#xff0c;每条边有一个正整数权值以及一种色光三原色红、绿、蓝之一的颜色。 现在度度熊想选出恰好 kk 条边&#xff0c;满足只用这 k 条边之中的红色边和绿色边就能使…

机器学习初学者公众号下载资源汇总(一)

感谢黄海广博士的分享 原创&#xff1a; 机器学习初学者 机器学习初学者 今天 本站提供了大量的机器学习初学者下载资源&#xff0c;现在对已经公布的资源做下汇总&#xff0c;每个资源都会有一个百度云链接&#xff0c;并同时提供“自动回复”的功能&#xff08;有时候百度云链…

Oracle和MySQL多表条件分页查询的高效SQL语句、MySQL分页查询总数total的获取

Oracle数据库分页查询&#xff1a; 利用rownum和between and关键字 -- 查询员工表和薪水表的分页sql&#xff08;pageNo&#xff1a;页号从1开始&#xff0c;pageSize&#xff1a;每页大小&#xff09; select* from(selectROWNUM rNo,user_id,user_name,user_dept,user_sal…

[通俗易懂]深入理解TCP协议(下):RTT、滑动窗口、拥塞处理

转自即时通讯网&#xff1a;http://www.52im.net/ 前言 此文为系列文章的下篇&#xff0c;如果你对TCP不熟悉的话&#xff0c;请先看看上篇《[通俗易懂]深入理解TCP协议&#xff08;上&#xff09;&#xff1a;理论基础》 。 上篇中&#xff0c;我们介绍了TCP的协议头、状态机…

【HDU - 4781】Assignment For Princess(图上构造)

题干&#xff1a; Long long ago, in the Kingdom Far Far Away, there lived many little animals. And you are the beloved princess who is marrying the prince of a rich neighboring kingdom. The prince, who turns out to be a handsome guy, offered you a golden en…

Vim编辑器最常用的快捷键

Vim编辑器常用快捷键 光标移动到行首、行尾&#xff1a; 数字0/$ 光标移动到第一行、最后一行&#xff1a; 大写H/L 快速移动到第一行也可以用gg 光标移动到第几行、从当前位置跳跃几行&#xff1a; 行号大写G 跳…

脑残式网络编程入门(一):跟着动画来学TCP三次握手和四次挥手

转自即时通讯网&#xff1a;http://www.52im.net/ 1、引言 网络编程中TCP协议的三次握手和四次挥手的问题&#xff0c;在面试中是最为常见的知识点之一。很多读者都知道“三次”和“四次”&#xff0c;但是如果问深入一点&#xff0c;他们往往都无法作出准确回答。 本篇文章尝…

【HDU - 5452】Minimum Cut(树形dp 或 最近公共祖先lca+树上差分,转化tricks,思维)

题干&#xff1a; Given a simple unweighted graph GG (an undirected graph containing no loops nor multiple edges) with nn nodes and mm edges. Let TT be a spanning tree of GG. We say that a cut in GG respects TT if it cuts just one edges of TT. Since love…

Idea自带的工具打jar包和Maven打Jar包(SpringBoot工程)

1.Idea自带的工具打jar包 &#xff08;1&#xff09;点击菜单栏的File后选中Project Structure&#xff0c;接着按如下图所示操作&#xff1a; &#xff08;2&#xff09;点击“OK”按钮后会出现下图的界面&#xff0c;然后继续点击“OK”按钮 &#xff08;3&#xff09;现在开…

图解算法学习笔记(目录)

今天遇到一本好书&#xff0c;如下&#xff0c;书很薄&#xff0c;不到200页&#xff0c;有将近400张图片&#xff0c;算法介绍的很有趣。这也是我读的第三本袁国忠先生翻译的书&#xff0c;向两位致敬。 目录大致如下; 第1章&#xff1a;二分查找和大O表示法&#xff1b; 第…

2019ACM浪潮杯山东省赛参赛总结

emmm是要记录一下生活了呢&#xff0c;不然以后退役了连自己经历过什么都记不住了。 5.11周六&#xff0c;早上5:30分&#xff0c;qdu集训队一行40人(左右)集合登上大巴&#xff0c;前往济南大学参加ACM省赛。上车清点了一下人数&#xff0c;然后发车以后就睡着了&#xff0c;…

Linux系统查看开放的端口、开启指定端口、关闭指定端口和查看及删除定时任务

Linux系统管理端口的操作命令 以下操作在需要开启防火墙&#xff0c;防火墙的开启(重启)、关闭和查看防火墙的状态见末尾 1.查看所有已经对外开放的端口&#xff1a;firewall-cmd --list-ports 2.开启指定的端口&#xff1a;firewall-cmd --zonepublic --add-port8080/tcp -…

图解算法学习笔记(一): 算法简介

本章内容&#xff1a; 编写第一种查找算法——二分查找。 学习如何谈论算法的运行时间——大O表示法。 1) 算法是一组完成任务的指令&#xff0c;任何代码片段都可视为算法。 2)二分查找&#xff1a;一种查找算法&#xff0c;其输入是一个有序的元素列表。 Python实现二分查…

用友通ERP客户端报无法登陆错

用友通ERP客户端报“无法登陆”错 排除系统版本错&#xff0c;要求windows xp professional sp2&#xff1b;client.dll文件错误后 请确认 c:/windows/system32/drivers/etc/目录下存在 hosts 文件&#xff0c;并且含有 127.0.0.1 localhost 行

【POJ - 3249】Test for Job(DAG线性求带负权的最长路,dp)

题干&#xff1a; Mr.Dog was fired by his company. In order to support his family, he must find a new job as soon as possible. Nowadays, Its hard to have a job, since there are swelling numbers of the unemployed. So some companies often use hard tests for …

图解算法学习笔记(二): 选择排序

目录 1)数组和链表&#xff1a; 2)选择排序算法&#xff1a; 3)小结 本章内容&#xff1a; 两种基本数据结构&#xff1a;数组和链表&#xff1b; 选择排序算法&#xff1b; 1)数组和链表&#xff1a; 数组是连续的内存单元&#xff0c;链表可以不连续&#xff1b; 链表…

javascript递归遍历文件夹下面的所有文件并返回所有文件全路径名称数组以及解析JavaScript方法体字符串的结束位置

一、前端脚本经常需要用到遍历指定文件夹下面的所有文件&#xff08;包含子文件夹&#xff09;的内容并做特定的逻辑处理&#xff0c;下面给出同步遍历的方式&#xff0c;开箱即用。 const fs require(fs);main()function main() {let allFiles getAllFiles(srcDir);console…

WinXP下替代IIS的新思路

WinXP下&#xff0c;.Net服务器有两个选择&#xff0c;IIS和Webdev.webservice。然而&#xff0c;IIS有最多十连接的限制&#xff0c;网上的解决方式&#xff08;包括注册表修改、微软工具、NTSwitch&#xff09;均未能突破&#xff1b;webdev.webservice虽没有连接数量限制&am…

【HDU - 5456】Matches Puzzle Game(数位dp,思维)

题干&#xff1a; As an exciting puzzle game for kids and girlfriends, the Matches Puzzle Game asks the player to find the number of possible equations A−BCA−BC with exactly n (5≤n≤500)n (5≤n≤500) matches (or sticks). In these equations, A,BA,B and …

图解算法学习笔记(三):递归

本章内容&#xff1a; 学习递归&#xff1b;如何将问题分解成基线条件和递归条件。 1) 每个递归函数都有两部分&#xff1a;基线条件(base case)和递归条件(recursive base)。例如&#xff1a;打印3...2...1 def countdown(i):print(i)if i < 0:returnelse:countdown(i…