元素对齐,居中相关

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了元素对齐,居中相关相关的知识,希望对你有一定的参考价值。

对于一个绝对定位的元素,他的水平居中对齐将left和right设为0,margin设为auto
对于一个绝对定位的元素,他的垂直居中对齐将top和bottom设为0,margin设为auto
如果想定位在外部对齐,那么将对应的位置设为0,然后对应的margin设置为负宽度

 

   <style>
        .container {
            background-color: #ee0000;
            width: 500px;
            height: 500px;
            margin: auto;
            position: relative;
        }
        .container div {
            width: 100px;
            height: 50px;
            background-color: #66ccff;
        }

        .box1{
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
        }

        .box2{
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .box3 {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        .box4{
            position: absolute;
            left: 0;
            margin-left: -100px;
        }
    </style>



<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
</div>


文字的居中对齐相关:

  对于文字的换行,将word-wrap设置为break-word 然后word-break设置为截断或者单

词边界截断即可
  当然还会有一些问题,在以后的text-wrap可能也会解决一些,现在还没有支持的浏

览器)
  (如果不想换行,可以用white-space: nowrap;)
  对于文字的居中,一行的情况下非常简单,只要line-height和父元素的height一样

即可



多行一直是一个比较头疼的问题

如果不固定高度也简单,把里面的span变成block,给个paddingtop和bottom顶开他…

…………………

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100px;
            background-color: #66ccff;
            margin: auto;
            word-break: break-all;
            word-wrap: break-word;
        }

        .box1 span {
            display: block;
            padding: 50px 0;

        }
    </style>

</head>
<body>
<div class="container">
    <div class="box1"><span>111111111111111111111111111111</span></div>
</div>
</body>
</html>



以下为父元素固定高度的垂直居中:

  如果参考表格的话,那还是有解决方法的.但是并不是谁都是表格,虽然css有

display这个东西,但它的兼容啊= =又是ie……
表格有valign这个东西,而一般的span可没有,在有valign的时候,可以用vertical-

align来对齐
  不理ie的话,我们有这种方法
  将父元素display:table(word-break: break-all;word-wrap: break-word;否则只是

单行的居中) 行内元素 display:table-cell;vertical-align: middle;
  (发现这种方法在firefox下,父元素的在container里的中心的定位炸了,只有水平

居中,没有垂直居中了…………)



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            background-color: #ee0000;
            width: 500px;
            height: 500px;
            margin: auto;
            position: relative;
        }
        .container div {
            width: 100px;
            height: 100px;
            background-color: #66ccff;
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        .box1{
            word-break: break-all;
            word-wrap: break-word;
            display: table;
        }

        .box1 span {
            display: table-cell;
            vertical-align: middle;

        }
    </style>

</head>
<body>
<div class="container">
    <div class="box1"><span>111111111111111111111111111111</span></div>
</div>
</body>
</html>



加一个小元素的方法
这种方法需要在内部加一层div或者p,然后放一个东西占位
margin和padding是消除p本身自带的边距
这是让一个看不见的东西撑起整个高度,然后把一个p设定为中间对齐
其实是p做了垂直居中

规则是p {vertical-align:middle, display: inline-block;}
看不见元素和p同级(显然不是包进去,因为他要撑开空间).vi {width: 0;height:

100%;vertical-align: middle;display: inline-block;}
不能给vi宽度,否则就不能和p一行了


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 100px;
            height: 200px;
            margin: auto;
            background-color: #ee0000;
            text-align: center;
        }

        .box1 p {
            margin: 0;
            padding: 0;
            vertical-align: middle;
            display: inline-block;
            word-break: keep-all;
            word-wrap: break-word;
            background-color: #66ccff;
        }

        .vi {
            width: 0;
            height: 100%;
            vertical-align: middle;
            display: inline-block;
        }
    </style>

</head>
<body>
<div class="middle-box">
    <div class="box1">
        <p>
            <span>11111111111</span>
            <span>22212222122</span>
        </p>
        <i class="vi"></i>
    </div>
    <i class="visible"></i>
</div>
</body>
</html>

以上是关于元素对齐,居中相关的主要内容,如果未能解决你的问题,请参考以下文章

使用 flexbox 左对齐和居中对齐元素

CSS:如何将列表元素与左对齐文本居中对齐?

CSS:如何将列表元素与左对齐文本居中对齐?

当其他元素居中对齐时,使用 Flexbox 将页脚与页面底部对齐

Delphi 元素对齐 - 居中

如何垂直居中对齐位置:相对元素?