关注前端 | 前端博客
当前位置: HTML5 > H5移动端常用布局

H5移动端常用布局

2018-11-08 分类:HTML5 作者:管理员 阅读(85)

H5移动端中,布局最常见的居中用的最多,我们实现的方法也有很多,以下列举几个示例。

内容居中

场景一:一块区域,点击是超链接跳转,超链接a标签里有文字,文字多少未知,但是不管文字多少都要垂直居中

利用display: table;display: table-cell;vertical-align: middle;来实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中 - 文字</title>
</head>
<style>
    body,p{
        margin: 0;
        padding: 0;
    }
    .container{
        display: table;
        height: 200px;
        width: 200px;
    }
    .wrap{
        display: table-cell;
        vertical-align: middle;
        border:1px solid #FF0099;
        background-color:#FFCCFF;
        text-align: center;
    }
</style>
<body>
    <div class="container">
        <a class="wrap" href="javascript:;">
            水平垂直居中 - 文字
        </a>
    </div>
</body>
</html>

文字单行超出省略号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中 - 文字</title>
</head>
<style>
    body,p{
        margin: 0;
        padding: 0;
    }
    .container{
        display: table;
        height: 200px;
        width: 200px;
    }
    .wrap{
        display: table-cell;
        vertical-align: middle;
        border:1px solid #FF0099;
        background-color:#FFCCFF;
        text-align: center;
    }
    .wrap p{
        width: 198px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }
</style>
<body>
    <div class="container">
        <a class="wrap" href="javascript:;">
            <p>水平垂直居中水平垂直居中水平垂直居中水平垂直居中</p>
        </a>
    </div>
</body>
</html>

水平垂直居中 - 文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中 - 文字</title>
</head>
<style>
    body,p{
        margin: 0;
        padding: 0;
    }
    .container{
        display: table;
        height: 200px;
        width: 200px;
    }
    .wrap{
        display: table-cell;
        vertical-align: middle;
        border:1px solid #FF0099;
        background-color:#FFCCFF;
        text-align: center;
    }
    .wrap p{
        width: 198px;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break:break-all;
    }
</style>
<body>
    <div class="container">
        <a class="wrap" href="javascript:;">
            <p>水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中水平垂直居中</p>
        </a>
    </div>
</body>
</html>

水平垂直居中 - 图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中 - 图片</title>
</head>
<style>
    body,p{
        margin: 0;
        padding: 0;
    }
    .container{
        display: table;
        height: 200px;
        width: 200px;
    }
    .wrap{
        display: table-cell;
        vertical-align: middle;
        border:1px solid #FF0099;
        background-color:#FFCCFF;
        text-align: center;
    }
    .wrap img{
        width: 125px;
        height: 125px;
        vertical-align: top;
    }
</style>
<body>
    <div class="container">
        <a class="wrap" href="javascript:;">
            <img src="http://moxiaofei.com/wp-content/uploads/2018/04/h5c3.jpg" alt="">
        </a>
    </div>
</body>
</html>

场景二:一块区域,内容有多个a链接,始终垂直居中

水平垂直居中 - 内容是a链接群

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中 - 多个a链接 </title>
</head>
<style>
    body,p{
        margin: 0;
        padding: 0;
    }
    .container{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        box-sizing: border-box;
        padding: 0 10px;
        margin: 50px auto;
    }
    .wrap{
        width: 100%;
    }
    .wrap p{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }
</style>
<body>
    <div class="container">
       <div class="wrap">
            <p><a href="javascript:;">有梦就要去追有梦就要去追有梦就要去追</a></p>
            <p><a href="javascript:;">有梦就要去追有梦就要去追有梦就要去追</a></p>
            <p><a href="javascript:;">有梦就要去追有梦就要去追有梦就要去追</a></p>
        </div>
    </div>
</body>
</html>

自适应 - 水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平垂直居中 - 文字 </title>
</head>
<style>
    body,p{
        margin: 0;
        padding: 0;
    }
  .container{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        position: relative;
    }
    .container a{
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform:translate(-50%,-50%);
        text-align: center;
    }
</style>
<body>
    <div class="container">
        <a href="javascript:;">有梦就要去追</a>
    </div>
</body>
</html>

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
1

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:

共有 0 条评论 - H5移动端常用布局

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

最近更新

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线