如何水平居中一个元素

在项目中经常会遇到居中问题,这里借鉴度娘的众多答案,做一个总结:

一、元素的水平居中

  1、行级元素的水平居中

<div style="width: 200px;height: 100px;border: 1px solid cyan; text-align: center;"><span>行级元素水平居中</span>
</div>

  

  很明显:子元素为行级元素时,只需要设置父元素 text-align:center 即可。

   2、块级元素的水平居中

<div style="width: 200px;height: 100px;border: 1px solid cyan;"><div style="border: 1px solid indianred;margin: 0 auto; height: 50px;width: 80px;">块级元素水平居中对齐</div>
</div>

  

  很明显:子元素为块级元素时,只需要设置父元素 margin: 0 auto; 即可。

  3、绝对定位元素的水平居中

  html代码

  

  css代码

  

 

  

   4、向对定位元素的水平居中

  css代码

  

  html代码

  

  这里需要注意的是父元素的宽度是给定的,原理是先让标签元素向右偏移50%,再左移宽度的一半。

   5、浮动元素的居中

  利用float来定位的元素

   css代码

  

  html代码

  

  

  这种效果类似于第4种:

  

  对于水平居中常见的就这几种,当然还有一些其他的方法可以解决居中问题,比如flex布局、table等。

  后续还会补充如何垂直居中一个元素。

    第一次写总结,如有疏漏或错误之处,敬请指正!

 

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

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

相关文章

Yammer Metrics,一种监视应用程序的新方法

当您运行诸如Web应用程序之类的长期应用程序时&#xff0c;最好了解一些关于它们的统计信息&#xff0c;例如&#xff0c;服务的请求数&#xff0c;请求持续时间或活动请求数。 但是还有一些更通用的信息&#xff0c;例如内部集合的状态&#xff0c;代码的某些部分被执行了多少…

mysql教程目录_MySql目录(二)

MySql索引(二) 转自&#xff1a; http://www.cnblogs.com/dreamhome/archive/2013/04/16/3025304.html 所有MySQL列类型可以被索引。根据存储引擎定义每个表的最大索引数和最大索引长度。 所有存储引擎支持每个表至少16个索引&#xff0c;总索引长度至少为256字节。大多数存储引…

solr和Lucene的配置方式和应用

solr字段类型 类说明BinaryField二进制数据BoolField布尔值&#xff0c;其中’t’/’T’/’1’都是trueCollationFiled支持Unicode排序CurrencyField支持货币和汇率DateRangeFiled支持索引date rangeExternamFiledFiledpull磁盘上的文件EnumField支持定义枚举值ICUCollationFie…

CSS——清除浮动的六种解决方案

内容的高度撑起父元素容器的高度&#xff0c;效果图如下HTML和CSS代码如下给&#xff50;标签加上浮动以后&#xff0c;&#xff50;&#xff5b;float&#xff1a;left&#xff1b;&#xff5d;&#xff0c;此时DIV塌陷&#xff0c;两段内容同行显示&#xff0c;效果如下&…

40个Java Collections面试问答

Java Collections Framework是Java编程语言的基本方面。 这是Java面试问题的重要主题之一。 在这里&#xff0c;我列出了Java集合框架的一些重要问题和解答。 什么是Java Collections Framework&#xff1f; 列出Collections框架的一些好处&#xff1f; 集合框架中泛型的好处…

AtCoder Beginner Contest 084(AB)

A - New Year 题目链接&#xff1a;https://abc084.contest.atcoder.jp/tasks/abc084_a Time limit : 2sec / Memory limit : 256MB Score : 100 points Problem Statement How many hours do we have until New Year at M oclock (24-hour notation) on 30th, December? Cons…

等待正确的时刻–集成测试

当您必须测试多线程程序时&#xff0c;总是需要等到系统达到特定状态后&#xff0c;测试才能验证是否达到了正确的状态。 这样做的通常方法是在系统中插入一个“探针”&#xff0c;该探针将向同步原语发出信号 &#xff08;例如Semaphore &#xff09;&#xff0c;并且测试将一…

网络编程---黏包

基于UDP协议的socket udp的server 不需要进行监听也不需要建立连接&#xff0c;在启动服务之后只能被动的等待客户端发送消息过来。 客户端发送消息的同时还会 自带地址信息&#xff0c;消息回复的时候 不仅需要发送消息 还需把对方的地址填上。 udp的client 不需要connect 因为…

CSS布局(二) 盒子模型属性

盒子模型的属性 宽高width/height 在CSS中&#xff0c;可以对任何块级元素设置显式高度。 如果指定高度大于显示内容所需高度&#xff0c;多余的高度会产生一个视觉效果&#xff0c;就好像有额外的内边距一样&#xff1b; 如果指定高度小于显示内容所需高度&#xff0c;取决于…

Extjs 下拉框

刚刚熟练了easyui控件的使用&#xff0c;又開始了如今的这个项目。这个项目是个半成品。前端使用的是Extjs控件&#xff0c;jsp中没有代码。就引用了非常多的js。。。于是乎有种不知所措了呀。。。 说实话特别的不想去看那些代码&#xff0c;第一是不熟悉&#xff0c;第二是太乱…

python输入代码界面通常_vscode写python时的代码错误提醒和自动格式化的方法

python的代码错误检查通常用pep8、pylint和flake8&#xff0c;自动格式化代码通常用autopep8、yapf、black。这些工具均可以利用pip进行安装&#xff0c;这里介绍传统的利用pip.exe安装和在VScode中安装两种方式。【温馨提醒】要使用flake8或要想flake8等工具起作用&#xff0c…

java编译找不到符号_关于久违的Javac,编译出现“找不到符号”

参考文档&#xff1a;http://blog.csdn.net/qq369201191/article/details/49946609工作以来习惯了maven编译&#xff0c;已经忘记了javac这个东东&#xff0c;以至于遇到javac问题时困惑了&#xff0c;下面总结一下&#xff0c;以便后者参考。一、使用javac进行项目java文件编译…

某些小时后MySql连接自动掉线

MySql配置为删除任何闲置超过8小时的连接。 这意味着什么&#xff1f; 在8个小时的间隔后返回到已部署的应用程序之后&#xff08;如果未更改默认SQL参数&#xff09;&#xff0c;将会遇到异常情况。 如何解决这个问题&#xff1f; 增加wait_time参数-不是一个好主意&#xff…

shopxx 阿里云OSS设置

shopxx 使用文档没有啊&#xff0c;只能自己看了 数据中心 字段其实是 EndPoint字段 URL前缀 是 图片服务器的主机地址。这个在阿里云回传的时候是不带的。 对应 阿里OSS 外网域名 转载于:https://www.cnblogs.com/nanahome/p/7346641.html

我的HTML总结之常用基础便签

HTML&#xff1a;是Hyper Text Markup Language&#xff08;超级文本标记语言&#xff09;的缩写&#xff0c;HTML不是一种程序&#xff0c;只是一种控制网页中数据显示的标识语言。 HTML由一组标签组成。 HTML的基本结构 <html> <head> <title>第一个HTML示…

您是否应该信任JVM中的默认设置?

如今&#xff0c;JVM被认为是智能的。 预期不会进行太多配置–只需设置要在启动脚本中使用的最大堆&#xff0c;您就可以进行了。 所有其他默认设置都很好。 大概我们当中有些人误以为。 实际上&#xff0c;在运行时期间发生了很多事情&#xff0c;无法自动调整性能&#xff0c…

【翻译】A Next-Generation Smart Contract and Decentralized Application Platform

原文链接&#xff1a;https://github.com/ethereum/wiki/wiki/White-Paper 当中本聪在2009年1月启动比特币区块链时&#xff0c;他同时向世界引入了两种未经测试的革命性的新概念。第一种就是比特币&#xff08;bitcoin&#xff09;&#xff0c;一种去中心化的点对点的网上货币…

css小随笔(二)与通用样式

51先在学校HTML5已经有半个多月了&#xff0c;然后这个星期做了一个京东的手机网站&#xff0c;接触到了通用样式&#xff0c;下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块&#xff0c;因为HTML5仅仅只是学完了基本标签跟css的标签&#xff0c;所以在没有接…

增加堆大小–谨防眼镜蛇效应

“眼镜蛇效应”一词源于英国殖民印度统治英国时所产生的轶事。 英国政府担心毒蛇眼镜蛇的数量。 因此&#xff0c;政府对每条死蛇给予悬赏。 最初&#xff0c;这是一个成功的策略&#xff0c;因为大量蛇被杀死以获取奖励。 最终&#xff0c;印度人开始养殖眼镜蛇以赚取收入。 …

如何创建可扩展的Java应用程序

开放的扩展使许多应用程序受益。 这篇文章描述了两种在Java中实现这种可扩展性的方法。 可扩展的应用 可扩展应用程序是可以扩展其功能而不必重新编译它们 &#xff0c;有时甚至不必重新启动它们的应用程序。 只需将jar添加到类路径中&#xff0c;或通过更复杂的安装过程来实现…