浅谈css处理水平居中的问题

互联网
秋天，稻田里的稻谷已经成熟了，一眼看去，好像铺了一地的金子，而农民伯伯们一个接一个到自己的田里捡金子。微风吹过，金色的海洋掀起一层层麦浪。

1、水平居中设置-行内元素

通过父元素设置 1 text-align:center; ，让父元素的内容居中

2、水平居中设置-定宽块状元素

块状元素的宽度width为固定值，通过设置“左右margin”值为“auto”来实现居中的

例子：

CSS Code复制内容到剪贴板
  1. <!DOCTYPEHTML>
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
  5. <title>定宽块状元素水平居中</title>
  6. <style>
  7. div{
  8. width:200px;/*固定的宽度*/
  9. margin:20pxauto;/*左右margin设置为auto*/
  10. border:1pxsolidred;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div>我是定宽块状元素，我要水平居中显示。</div>
  16. </body>
  17. </html>

3、水平居中设置-不定宽块状元素

方法1. 加入 table 标签

例子：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEHTML>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <title>不定宽块状元素水平居中</title>
  6. <style>
  7. table{
  8. margin:0auto;
  9. }
  10. /*下面是任务区代码*/
  11. .wrap{
  12. background:#ccc;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <table>
  18. <tbody>
  19. <tr><td>
  20. <divclass="wrap">
  21. 我要水平居中
  22. </div>
  23. </td></tr>
  24. </tbody>
  25. </table>
  27. </body>
  28. </html>

方法2. 设置 display:inline; 方法，与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置

例子：

CSS Code复制内容到剪贴板
  1. <!DOCTYPEHTML>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <title>不定宽块状元素水平居中</title>
  6. <style>
  7. .container{text-align:center;}
  8. .containerul{list-style:none;margin:0;padding:0;display:inline;}
  9. .containerli{margin-right:8px;display:inline;}
  10. </style>
  11. </head>
  13. <body>
  14. <divclass="container">
  15. <ul>
  16. <li><arel="nofollow noopener noreferrer" href="#">1</a></li>
  17. <li><arel="nofollow noopener noreferrer" href="#">2</a></li>
  18. <li><arel="nofollow noopener noreferrer" href="#">3</a></li>
  19. </ul>
  20. </div>
  21. </body>
  22. </html>

方法3. 设置 position:relative 和 left:50% 利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

例子：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEHTML>
  2. <html>
  3. <head>
  4. <metacharset="utf-8">
  5. <title>不定宽块状元素水平居中</title>
  6. <style>
  7. /*下面是代码任务区*/
  8. .wrap{
  9. clear:both;
  10. float:left;
  11. position:relative;
  12. left:50%
  13. }
  14. .wrap-center{
  15. background:#ccc;
  16. position:relative;
  17. left:-50%;
  18. }
  19. </style>
  20. </head>
  22. <body>
  23. <!--下面是代码任务区-->
  24. <divclass="wrap">
  25. <divclass="wrap-center">我们来学习一下这种方法。</div>
  26. </div>
  27. </body>
  28. </html>

以上这篇浅谈css处理水平居中的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例