HTML中进行居中设置

article/2025/9/20 6:57:47

html居中的方法如下：

1、打开HTML的编辑器。

2、找到需要居中的图片或者文字。

3、在body里面，设置CSS样式。

4、添加样式为：text-align：center ；即可。

超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言 （markup language），是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

详细以下：

行内元素
当被设置的元素是文本、图片等行内元素的时候，我们是通过给父元素设置

text-align:center

来实现的。

<body><div class="textCenter">这是一个在父元素中居中元素</div>
</body>
<style>textCenter{text-align:center;}
</style>

由上述代码可知"这是一个在父元素中的居中元素"这段文字的父元素的CSS样式增加了 text-align:center；属性，所以文本展示居中。但是当被设置元素为块级元素时候这种方式就不太适用了，块级元素的情况又分为定宽块级元素和不定宽块级元素两种。

定宽块级元素
满足定宽块级元素"定宽"和"块级元素"两个条件是可以通过设置左右***margin***的值为***auto***来实现居中。

<body><div>水平居中的定宽块级元素</div>
</body>
<style>div{border:1px solid blue;width:100px;    /*宽度设置固定值*/margin:10px auto;}
</style>
/*或者也可以写成 margin-left:auto;margin-right:auto;*/
/* 元素的上下margin属性可以照常设置，不受影响 */

不定宽块级元素
不定宽块级元素的居中方法有三种：第一种是加入table标签；第二种是设置display:inline方法，与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置；第三种方法是设置position:relative和left:50%，利用相对定位的方式，将元素向左偏移50%用以实现居中的目的。

加入table标签

加入table标签是利用table标签的长度自适应性（不定义其长度也不默认父元素body的长度，table长度是根据内文本长度决定的），因此可以看作一个定宽块级元素，然后再利用定宽块级元素居中的margin方式使其水平居中。

使用的方式第一步为需要设置居中的元素外面加一个table标签，然后为这个table设置"左右margin居中"

<div><table><tbody><tr><td><ul><li>锄禾日当午</li><li>汗滴禾下土</li><li>谁知盘中餐</li><li>粒粒皆辛苦</li></ul></td></tr></tbody></table>
</div>
<style>table{border:1px solid;margin:0 auto;}
</style>

设置display:inline方法

改变块级元素的display为inline类型，设置为行内元素显示，然后使用 text-align:center来实现居中显示。这种方法相较于设置table方式的优势是不用增加无语义标签，但是这种方式也存在一定的问题，就是它将块状元素的display改为inline，元素变为行内元素后会少了一些功能使用。

<body><div class="container"><ul><li><a href="#">First</a></li><li><a href="#">Second</a></li><li><a href="#">Third</a></li></ul></div>
</body><style>
.container{text_align:center;
}
.container ul{list-style:none;margin:0;padding:0;display:inline;
}.container li{
margin-right:10px;
display:inline;
}
</style>

设置position:relative和left:50%

通过给父元素设置float，然后设置position:relative和left:50%，子元素设置position:relative和left:50%来实现水平居中。

<body>
<div class="container"><ul><li><a href=""#>First</a></li><li><a href=""#>Second</a></li><li><a href=""#>Third</a></li><li><a href=""#>Fourth</a></li></ul>
</div>
</body><style>
.container{float:left;position:relative;left:50%;
}.container ul{list-style:none;margin:0;padding:0;position:relative;left:-50%
}.container li{float:left;display:inline;margin-right:8px
}
</style>

垂直居中
垂直居中分为两种情况分别是父元素高度确定的单行文本和父元素高度确定的多行文本。

父元素高度确定的单行文本

父元素高度确定的单行文本竖直居中的方法是通过 设置父元素的height和line-height高度一致来实现的。height是该元素的高度，line-height是行高，也就是行间距，是行与行之间的基线间的距离。line-height与font-size的计算值之差分为两半(在CSS中称为"行间距")，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。这种文字行高与块高一致带来了一个弊端，就是当文字内容的长度大于块的宽度的时候，就会有内容脱离了块。

<div class="container">hello,world!
</div><style>
.container{height:10px;line-height:10px;
}
</style>

父元素高度确定的多行文本

父元素高度确定的多行文本、图片等竖直居中有两种方式，第一种是插入table标签，然后设置vertical-align:middle。CSS中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。

/* 方式一 */
<body>
<table><tbody><tr><td class="wrap">
<div><p>居中一下</p>
</div>
</td></tr></tbody></table>
</body><style>
table td{height:500px;background:#ccc;
}
</style>/* 方式二 */
<div class="container"><div><p>居中一下下</p><p>居中一下下</p><p>居中一下下</p><p>居中一下下</p><p>居中一下下</p></div>
</div>
<style>
.container{height:300px;background:#ccc;display:table-cell;/*IE8以上及Chrome、Firefox*/vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。

隐性改变display类型
在我们开发过程中当为元素设置 position:absolute 或者 float:left 属性的时候，元素的显示类型就会自动变为以display:inline_block (块级元素)的方式显示，可以设置元素的width和height。

<div class="container"><a href="#" title="">点这里看看</a>
</div>
<style>
.container a{position；absolute;width:200px;background:#ccc;
}
</style>

总结：

一：对于行内元素采用text-align:center;的方式
在这里插入图片描述

二：采用margin:0 auto;来实现水平居中显示
在这里插入图片描述
三：用table实现
在这里插入图片描述
四；块级的元素但是通过转换成行内元素来实现块级元素的水平居中显示
在这里插入图片描述
五：父子元素都采用相对定位，父元素left:50%;子元素left:-50%;相对自己的长度减回50%，这样实现向右偏移后拉回多的部分
在这里插入图片描述
六:采用css3的flexbox，display:flex;
在这里插入图片描述
七：用父元素的 display:relative;直接采用position:absolute;left:0;right:0;margin:auto来实现水平以居中
在这里插入图片描述
主要代码实现：

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html><head><title>css的水平居中</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><style type="text/css">#page{width: 100%;color: white;}.he{width: 100%;height: 100px;background: #625050;text-align: center;line-height: 100px;}.bo{width: 100%;background: #6aa087;}.fo{height: 100px;background: #2f5d34;}.content{height: 100px;border: 2px solid #fff;}.content1{background: #66a05c;text-align: center;}.content2{background: #8a5841;text-align: center;}.content2Bo{height:50px;width: 60%;border: 2px solid red;line-height: 50px;margin: 0 auto;}.content3{background: #2f5d34;}table{margin: 0 auto;}.content4{background: #8a5841;text-align: center;}.contentBo4{display: inline;}ul li{list-style-type: none;}.content5{float: left;position: relative;left: 50%;}.contentBo5{position: relative;left: -50%;background: #231b40;}.content6{width: 100%;text-align: center;background: #9ca05c;display: flex;align-items: center;justify-content: center;}.content7{position: relative;}.contentBo7{position: absolute;left: 0;right: 0;width: 80%;border: 2px solid red;margin: 0 auto;text-align: center;}</style></head><body><div id="page"><div class="he"><h1>下面是对元素水平居中对齐的几个例子以及说明</h1></div><div class="bo"><div class="content content1">这是内容区一：实现对行内元素的水平居中显示 采用text-align:center;的方式。</div><div class="content content2"><div class="content2Bo">这是内容区二:红色区域部分采用margin:0 auto;来实现水平居中显示，当然要写好元素的宽度。</div></div><div class="content content3"><table><tbody><tr><td>这是内容区三：用table实现。</td></tr></tbody></table></div><div class="content content4"><ul class="contentBo4"><li>这是第一行</li><li>这是第二行</li><li>这是内容区四：本来是contentBo4的块级的元素但是通过转换成行内元素来实现块级元素的水平居中显示。</li></ul></div><div class="content5"><div class="content contentBo5">这是内容区五：父子元素都采用相对定位，父元素left:50%;子元素left:-50%;相对自己的长度减回50%，这样实现向右偏移后拉回多的部分。</div></div><div class="content content6">这是内容区六:采用css3的flexbox，display:flex;</div><div class="content content7"><div class="contentBo7">这是内容区七:用父元素的 display:relative;直接采用position:absolute;left:0;right:0;margin:auto来实现水平以居中。</div></div></div><div class="fo"><pre> 总结下：其实实现水平居中只有一下几种思路：1：对于最简单的行内元素的居中采用text-align:center;设置即可。2：对于最普通的水平居中采用绝对定位后设置left：50%;后再采用各种方式去实现自身水平差的补回。3：对于普通的元素对齐还可以采用绝对定位后left:0;right:0;加上元素的宽度，在此基础之上就可以采用margin:auto;实现水平对齐了。4：用css3的Flexbox属性5:在元素外嵌套table实现，但是这样会有很多层嵌套 6：marin:0 auto;方便的实现已知宽度的水平居中</pre></div></div></body>
</html>

http://chatgpt.dhexx.cn/article/OGOEr8q0.shtml

相关文章

div居中

div居中

HTML的div居中 一、margin:0px auto; 给需要居中的div设置一个宽度&#xff0c;然后设置元素的上下外边距为 相等 左右外边距为 auto&#xff0c;比如&#xff0c;margin:0px auto。 则可以实现 div 居中显示。 对于浮动元素&#xff0c;设置其左右外边距为关键字 auto 是无效…
阅读更多...
HTML元素居中（文字居中，块居中【垂直/水平居中】）

HTML元素居中（文字居中，块居中【垂直/水平居中】）

一、文字、行内元素水平居中 给父级属性设置text-align: center即可 HTML代码: <div><p>p</p></div> <div><span>span</span></div> <div><a href"#">a</a></div>CSS代码&#xff1a; …
阅读更多...
html让文字居中

html让文字居中

html让文字居中的方法&#xff1a;1、给文本所在标签加CSS属性值“text-align:center”&#xff1b;2、在行内标签或行内块级标签中加CSS属性值“text-align:left”。 本文操作环境&#xff1a;windows7系统、HTML5&&CSS3版、Dell G3电脑。 两种情况&#xff1a;1、文…
阅读更多...
word文字居中怎么设置

word文字居中怎么设置

电脑编辑文档时&#xff0c;想要把文字内容居中显示&#xff0c;那么word怎么居中文字&#xff0c;今天和大家一起学习下。 方法1 1&#xff0c;打开新建的word文档&#xff0c;输入文字。 2&#xff0c;选中文字&#xff0c;然后点击工具栏的“居中对齐”&#xff0c;确定即…
阅读更多...
8种css居中实现的详细实现方式了

8种css居中实现的详细实现方式了

这是一篇关于居中对齐方式的总结 开篇之前&#xff0c;先问一下大家都知道几种居中的实现方式&#xff1f; 面试时答出来两三个就不错了&#xff0c;就怕面试官还让你继续说。今天就来总结一下这些居中的方式 使用flex布局设置居中。使用flex 时也能通过给子项设置margin: au…
阅读更多...
各种居中方法汇总（究极版）

各种居中方法汇总（究极版）

本文部分参考文章&#xff1a;https://github.com/ljianshu/Blog/issues/29 每一部分后另附相关实践代码 前言 本文主要介绍水平居中&#xff0c;垂直居中&#xff0c;还有水平垂直居中各种办法&#xff0c;思维导图如下&#xff1a; 一、水平居中 1.行内元素水平居中 利用…
阅读更多...
css居中大全（文字居中、块居中、水平居中、垂直居中）

css居中大全（文字居中、块居中、水平居中、垂直居中）

css居中 一、水平居中 1.块本身水平居中 div{width: 100px;height: 100px;border: 1px solid #000;margin:auto;} <div>我本身水平居中 </div>div的margin不设值怎么表示&#xff1a;不设值&#xff0c;也是auto /*给块居中 上20&#xff0c;左右居中&#xff…
阅读更多...
Skipped breakpoint at because it happened inside debugger evaluation

Skipped breakpoint at because it happened inside debugger evaluation

问题描述&#xff1a; 在多线程项目中&#xff0c;在idea中打断点时&#xff0c;有时会遇到下面这种情况&#xff1a; idea左下角出现一行红底或者绿底文字提示&#xff1a; Skipped breakpoint at because it happened inside debugger evaluation 然后我们能感受到的就是…
阅读更多...
IDEA Debug出现：Skipped breakpoint at because it happened inside debugger evaluation

IDEA Debug出现：Skipped breakpoint at because it happened inside debugger evaluation

在使用IDEA debug功能时&#xff0c;没有出现断点处程序变量快照&#xff0c;而是进入了如下debug界面&#xff0c;并打开了URL类加载程序&#xff1a; 网上有一些方法&#xff0c;但其实都没用&#xff0c;或者说没有从根本上解决这个问题&#xff0c;下面给出我的方法。 ok&a…
阅读更多...
ssh上传公钥报 All keys were skipped because they already exist on the remote system.

ssh上传公钥报 All keys were skipped because they already exist on the remote system.

项目需要用Ansible进行多台服务器部署&#xff0c;服务器申请下来给app用户赋了权限后root用户就被上收了。 在做ssh免密登陆时报错&#xff1a; sudo ssh-copy-id -i /root/.ssh/id_rsa.pub app22.10.206.140 试了很多方法都没用&#xff0c;结果在140服务器新建/root/.ssh这…
阅读更多...
创建vue项目的时候报错：Skipped git commit due to missing username and email in git config.

创建vue项目的时候报错：Skipped git commit due to missing username and email in git config.

创建vue项目的时候报错&#xff1a; WARN Skipped git commit due to missing username and email in git config, or failed to sign commit. You will need to perform the initial commit yourself. 原因&#xff1a; git 进行初始化提交 没有绑定 对应的 git用户名和邮箱 …
阅读更多...
Skipped breakpoint because it happened inside debugger evaluation

Skipped breakpoint because it happened inside debugger evaluation

在debug项目时总是会莫名其妙的多出system.out的数据&#xff0c;莫名其妙&#xff0c;搜到这篇文章&#xff0c;帮助很大&#xff0c;转载一下 解决Skipped breakpoint at %code reference% because it happened inside debugger evaluation的通用方法。 先尝试去掉勾选 Ena…
阅读更多...
Elasticsearch的search之_shards skipped之谜

Elasticsearch的search之_shards skipped之谜

es从 v5.6 开始引入了 pre-filter 机制&#xff08;skipped&#xff09;&#xff1a;对于 Date 类型的 Range 查询&#xff0c;在对分片执行搜索之前&#xff0c;先检查一下分片是否包括被查询的数据范围&#xff0c;如果查询的范围与分片持有的数据没有交集&#xff0c;就跳过…
阅读更多...
Cadence常见问题:Analysis was skipped due to inability to compute operating point?

Cadence常见问题:Analysis was skipped due to inability to compute operating point?

题主使用门电路创建sr触发器电路图如下&#xff1a; 欲在sr端加电压pulse验证sr输出特性&#xff0c;遇到以下报错&#xff1a; 显示输出不收敛 解决方法&#xff1a; 题主是直接调用ahdlLib中的或非门&#xff0c;是理想或非门&#xff0c;所以造成不收敛的问题 用晶体管自己搭…
阅读更多...
linux 使用rz命令上传文件失败skipped by remote

linux 使用rz命令上传文件失败skipped by remote

一、背景 linux 通过rz命令上传 文件&#xff0c;显示xx skipped by remote 点击任意键后&#xff0c;文件并没有上传成功 二、解决方案 应该是权限问题&#xff0c;我当前并不是超级权限&#xff0c; 先切换超级权限 sudo su - 然后再上传 文件就可以了
阅读更多...
SparkUI中显示stage skipped的原因【源码分析】

SparkUI中显示stage skipped的原因【源码分析】

SparkUI中显示stage skipped的原因【源码分析】 Spark Job的ResultStage的最后一个Task成功执行之后&#xff0c;DAGScheduler.handleTaskCompletion方法会发送SparkListenerJobEnd事件&#xff0c;源码如下&#xff1a;JobProgressListener.onJobEnd方法负责处理SparkListener…
阅读更多...
unprintable character xxxx skipped解决方案

unprintable character xxxx skipped解决方案

在keil软件中输入源代码的时候 常常会出现上述错误 双击蓝色那一条文字 -----到34行处 可以发现注释中间的分号是在中文状态下 而在这里面我们只能用英文状态下的分号 所以将分号改为英文状态下的分号即可 若实在不行 就直接删除注释~~~
阅读更多...
spark web ui中的skipped的含义

spark web ui中的skipped的含义

顾名思义&#xff0c;跳出的意思啦。 例如如图&#xff1a; skipped的stages代表是已经执行过了。所以不需要再执行了。 如何&#xff0c;你有一个 testRdd。然后先做 testRdd.Filter("xxx").map("xx")&#xff0c; 这个是transform 然后再分别做了count和…
阅读更多...
svn的skipped,no versioned parent报错解决方法

svn的skipped,no versioned parent报错解决方法

http://blog.csdn.net/lanjinghai507/article/details/52327636 感谢分享 今天一大早&#xff0c;习惯性的用sublime_text,选择文件夹&#xff0c;然后删除该文件&#xff0c;再然后跟新&#xff0c;接着就出现skipped,no versioned parent的报错&#xff0c;如下图 skipped…
阅读更多...
ntohs和htons的区别

ntohs和htons的区别

虽然注册CSDN已经有好几年了&#xff0c;学习写程序也有两年的时间了。对于绝大数人来说&#xff0c;我还是得菜鸟。平时遇到什么问题也会来到这个平台搜索别人的解答。也从这个平台上获益很多。 今天在公司因为一个问题和同事就关于htons与ntohs有没有区别探讨了一下&#xff…
阅读更多...
推荐文章

Copyright @ 2022~2023