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

时间：2021-05-08

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

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

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

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

例子：

CSS Code复制内容到剪贴板
  • <!DOCTYPEHTML>
  • <html>
  • <head>
  • <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
  • <title>定宽块状元素水平居中</title>
  • <style>
  • div{
  • width:200px;
  • margin:20pxauto;
  • border:1pxsolidred;
  • }
  • </style>
  • </head>
  • <body>
  • <div>我是定宽块状元素，我要水平居中显示。</div>
  • </body>
  • </html>

    • 3、水平居中设置-不定宽块状元素
    方法1. 加入 table 标签

    例子：

    XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEHTML>
  • <html>
  • <head>
  • <metacharset="utf-8">
  • <title>不定宽块状元素水平居中</title>
  • <style>
  • table{
  • margin:0auto;
  • }
  • .wrap{
  • background:#ccc;
  • }
  • </style>
  • </head>
  • <body>
  • <table>
  • <tbody>
  • <tr><td>
  • <divclass="wrap">
  • 我要水平居中
  • </div>
  • </td></tr>
  • </tbody>
  • </table>
  • </body>
  • </html>

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

    例子：

    CSS Code复制内容到剪贴板
  • <!DOCTYPEHTML>
  • <html>
  • <head>
  • <metacharset="utf-8">
  • <title>不定宽块状元素水平居中</title>
  • <style>
  • .container{text-align:center;}
  • .containerul{list-style:none;margin:0;padding:0;display:inline;}
  • .containerli{margin-right:8px;display:inline;}
  • </style>
  • </head>
  • <body>
  • <divclass="container">
  • <ul>
  • <li><ahref="#">1</a></li>
  • <li><ahref="#">2</a></li>
  • <li><ahref="#">3</a></li>
  • </ul>
  • </div>
  • </body>
  • </html>

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

    例子：

    XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEHTML>
  • <html>
  • <head>
  • <metacharset="utf-8">
  • <title>不定宽块状元素水平居中</title>
  • <style>
  • .wrap{
  • clear:both;
  • float:left;
  • position:relative;
  • left:50%
  • }
  • .wrap-center{
  • background:#ccc;
  • position:relative;
  • left:-50%;
  • }
  • </style>
  • </head>
  • <body>
  • <!--下面是代码任务区-->
  • <divclass="wrap">
  • <divclass="wrap-center">我们来学习一下这种方法。</div>
  • </div>
  • </body>
  • </html>

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

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章