首页 > 其他分享 >让元素水平居中的方法有哪些?

让元素水平居中的方法有哪些?

时间:2023-02-09 13:04:46浏览次数:46  
标签:居中 哪些 实现 元素 水平 宽度 文本


 如何让元素水平居中?这是一道很常见的面试题,对于已知宽度和未知宽度的处理方法又有所不同,大致有以下7种:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>让元素水平居中的方法有哪些</title>
<style>
*{
margin:0;
padding:0;
}
body>div{
height:100px;
}
</style>
</head>
<body>

<div style="width:288px;margin:0 auto;">
用固定宽度加外边距自动实现水平居中
</div>


<div style="position:relative;">
<!-- margin-left为width宽度的一半 -->
<div style="width:288px;position:absolute;left:50%;margin-left:-144px">
用绝对定位加负的左外边距实现水平居中
</div>
</div>


<div style="text-align:center;">
<span>用文本居中让行内元素水平居中</span>
</div>

<div style="text-align:center;">
<div style="display:inline-block;">
用文本居中加行内块实现水平居中
</div>
</div>

<div style="position:relative;">
<!-- 如果还想要子元素垂直居中,可以加上:top:50%;transform 改成 translate(-50%,-50%); -->
<div style="position:absolute;left:50%;transform:translateX(-50%);">
用绝对定位加平移实现水平居中
</div>
</div>

<div style="display:table;margin:0 auto">
<!-- 想要垂直居中可以在子元素上加上:display:table-cell;vertical-align:middle -->
<span>用表格布局加外边距自动实现水平居中</span>
</div>

<div style="display:flex;justify-content:center;">
<span>用弹性布局加文本对齐居中实水平居中</span>
</div>

</body>
</html>

标签:居中,哪些,实现,元素,水平,宽度,文本
From: https://blog.51cto.com/u_15959833/6046865

相关文章

  • CSS 3.0中伪元素after和before的妙用
    我们常用CSS3.0中的伪元素来修饰一些细节,让页面看起来效果更好,比如下面这个图片中的面包屑导航中的符号,还有任务清单前的序列符号,都是用伪元素实现的。 以下是代码实现,希......
  • HTML 元素
    HTML文档由HTML元素定义。HTML元素开始标签*元素内容结束标签*<p>这是一个段落</p><ahref="default.htm">这是一个链接</a><br>换行 *开始......
  • 地图用得好,数据更直观!bi软件都有哪些地图图表?
    地图图表的使用频率有多高?每次做分析报告十有八九都要用到它。但不同情况下所需的地图图表往往不同,这就要求bi数据可视化软件能够提供更加多多样化的地图图表。bi数据可视化......
  • 互联网医院开发|搭建互联网医院需要具备哪些资质
    很多的企业想搭建互联网医院平台,但是搭建互联网医院平台是需要资质的,这种移动医疗平台也不是随便就能开办的,毕竟也同属医疗行业,大家也都知道医疗行业的门槛也是比较高的......
  • 关于小程序变现方式你还知道哪些?
    提到小程序游戏,大多数人第一印象就是微信小游戏,不过实际上小程序游戏的渠道远不止于此。近期小游戏爆款频出,截至现在,微信小游戏开发者的数量已超过了10万余人次,不得不说现......
  • 在排序数组中查找元素的第一个和最后一个位置(Leetcode34)
    3.在排序数组中查找元素的第一个和最后一个位置(Leetcode34)给定一个按照升序排列的整数数组nums,和一个目标值target。找出给定目标值在数组中的开始位置和结束位置。如......
  • 云数据库有哪些优势
    一,是更高的灵活性和可扩展性。   利用云计算池化资源的天然优势,云数据库可以提供更好的弹性,利于企业进行存储和计算资源的独立扩缩容,按需开通、快速部署,使资源得到最......
  • 第三方软件测试机构进行性能测试有哪些流程?
    软件性能是衡量一款软件产品质量的重要指标之一,检测软件产品的性能可以通过性能测试来进行。性能测试在软件的质量保证中起着十分重要的作用,它包括的测试内容也丰富多样......
  • CSS伪元素选择器
    我们来看个案例,杂志内容中的第一个字符R。样式是特殊定义过的,如果将杂志内容在浏览器中加载,我们该如何实现这个效果呢?这就需要用到CSS中中的伪元素选择器来实现了,伪元素选择......
  • 【codevs1230】元素查找
    problem给出n个正整数,然后有m个询问询问该整数是否在n个正整数中出现过solution哈希表?当然是set水洛codes#include<iostream>#include<set>usingnamespacestd;set<int>s......