当前位置:   article > 正文

css 常用居中布局总结_css中left后边为什么还要加center

css中left后边为什么还要加center

主流CSS 布局

居中布局

相对定位是不脱离文档流的,元素的初始位置占据的空间会被保留

  1. 水平居中布局
  2. 垂直居中布局
  3. 居中布局(水平+垂直)

水平居中布局常见解决方案

水平居中布局就是指当前元素在父级元素容器中, 水平方向是居中显示的.

第一种方案: inline-block + text-align 配合使用

  1. 首先我们需要在 html 页面中定义一个父子结构
 <div class="parent">
        <div class="child">文本</div>
  </div>
  • 1
  • 2
  • 3
  1. 通过以下 css样式代码实现水平方向居中布局效果
  • 父级元素设置 text-align 值为 center
  • 子级元素设置 display: inline-block
<style>
        .parent {
    
            width: 100%;
            height: 200px;
            background: white;
            text-align: center;
        }

        .child {
    
            width: 200px;
            height: 200px;
            background: red;
            display: inline-block;
        }
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

实现这种居中效果的原理解释:

/*
    text-align属性: 是为文本内容设置对齐方式的, 而当display 属性为 inline-block的时候也是内联元素,所以对其有效
        left: 左对齐
        center: 居中对齐
        right: 右对齐
*/

# --------------------
  /*
     display 属性:
       block: 表示块级元素
       inline: 表示内联元素
       inline-block: 行内块级元素(块级+内联) 

*/
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
这种实现方案的优缺点
  1. 优点:
// 浏览器兼容性比较好
  • 1
  1. 缺点:
// text-algin 属性是具有继承性的, 会导致子级元素的文本也是居中显示的.

# 解决方案
  在子级元素中重新设置 text-algin 属性
  • 1
  • 2
  • 3
  • 4

第二种方案: table + margin 属性配合使用

  1. 首先我们同样在 html中定义父子结构
 <div class="parent">
        <div class="child">child</div>
  </div>
  • 1
  • 2
  • 3
  1. 通过以下css 样式代码实现水平方向居中布局

这种解决方案的 table和 margin 属性都是设置给子级元素的, 而不需要给父级元素设置任何 居中样式属性.

<s
    声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/702696
    推荐阅读
    相关标签
      

    闽ICP备14008679号