Rumah > hujung hadapan web > tutorial css > 关于用css实现文本和图片垂直水平居中

关于用css实现文本和图片垂直水平居中

黄舟
Lepaskan: 2017-06-06 13:25:26
asal
2163 orang telah melayarinya

 

关于用css实现文本和图片垂直水平居中

 

一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅。

一、文本垂直水平居中

1、水平居中:

  文字水平居中没什么好说的,用text-align: center;即可很容易的实现。


 

2、垂直居中:

  1)简单的单行文本 

  利用line-height==height,使得单行文本垂直居中。

1

2

3

1 <p>

2     垂直水平居中

3 </p>

Salin selepas log masuk

1

2

3

4

5

6

1 p{

2     width: 200px;

3     height: 200px

4     text-align: center;

5     line-height: 200px;

6     background:#1AFF00;7 }

Salin selepas log masuk

  简单点来说,用p标签就可以,就像这样 

1

<p>垂直水平居中</p>

Salin selepas log masuk


1

2

3

4

5

6

7

1 p{

2     width: 200px;

3     height: 200px;

4     text-align: center;

5     line-height: 200px;

6     background:#00ABFF;7 

}

Salin selepas log masuk

   效果如下:

         


 

  2)多行文本

  利用表格元素的特性,块级父元素display: table;内联元素display: table-cell;vertical-align: middle; 

(内联)

1

2

3

1 <p

2     <span>国际《儿童权利公约》界定的儿童系指18岁以下的任何人</span>

3 </p>

Salin selepas log masuk

1

2

3

4

5

6

7

8

9

 1 p{ 

 2     width: 200px; 

 3     height: 200px; 

 4     display: table; 

 5     background:#1AFF00; 

 6 } 

 7 span{ 

 8     display: table-cell; 

 9     vertical-align: middle;10 }

Salin selepas log masuk

(块级)

1

2

3

1 <p>

2     <p>国际《儿童权利公约》界定的儿童系指18岁以下的任何人</p>

3 </p>

Salin selepas log masuk

  定位+transform: translateY(-50%); 


1

2

3

4

5

6

7

8

9

10

11

12

13

 1 p{ 

 2     position: relative; 

 3     width: 200px; 

 4     height: 200px; 

 5     background: #00ABFF; 

 6 } 

 7 p{ 

 8     position: absolute; 

 9     top: 50%;

 10     left: 0;

 11     width: 200px;

 12     height: 64px;

 13     transform: translateY(-50%);14 }

Salin selepas log masuk

  定位+margin负值

1

2

3

4

5

6

7

8

9

10

11

12

13

14

 1 p{ 

 2     position: relative; 

 3     width: 200px; 

 4     height: 200px; 

 5     background:#1AFF00; 

 6 } 

 7 p{ 

 8     position: absolute; 

 9     top: 50%;

 10     left: 0;

 11     width: 200px;

 12     height: 64px;

 13     margin-top: -32px;

 14 }

Salin selepas log masuk

  定位+margin: auto;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

 1 p{ 

 2     position: relative; 

 3     width: 200px; 

 4     height: 200px; 

 5     background:#00ABFF; 

 6 } 

 7 p{ 

 8     position: absolute; 

 9     top: 0;

 10     left: 0;

 11     right: 0;

 12     bottom: 0;

 13     margin: auto;

 14     width: 200px;

 15     height: 64px;

 16 }

Salin selepas log masuk

  两者都是定宽定高,父元素用padding值,此值为父元素高度减去子元素高度的一半

1

2

3

4

5

6

7

8

9

10

 1 p{ 

 2     width: 200px; 

 3     height: 64px; 

 4     padding: 68px 0; 

 5     background:#1AFF00; 

 6 } 

 7 p{ 

 8     width: 200px; 

 9     height: 64px;

 10 }

Salin selepas log masuk

  两者都是定宽定高,父元素用overflow: hidden;(css hack)子元素用margin值,此值为父元素高度减去子元素高度的一半

1

2

3

4

5

6

7

8

9

10

11

p{

    width: 200px;

    height: 200px;

    overflow: hidden;

    background:#00ABFF;

}

p{

    width: 200px;

    height: 64px;

    margin:68px auto;

}

Salin selepas log masuk

效果如下:

  


二、图片垂直水平居中

1、水平居中

  1)img在css初始设置中是inline-block,行内块元素,此时若是要水平居中用text-align:center;

  2)给img元素设置display:block;转换为块级元素,要想水平居中用margin:0 auto;


2、垂直居中

   1.jpg

  用这张图片做示范


1

2

3

1 <p>

2     <img alt="" src="1.jpg" />

3 </p>

Salin selepas log masuk

  line-height==height vertical-align: middle;

1

2

3

4

5

6

7

8

9

10

p{

    width: 198px;

    height: 198px;

    text-align: center;

    line-height: 198px;

    border: 1px solid #8900FF;

}

img{

    vertical-align: middle;

}

Salin selepas log masuk

  display: table-cell;vertical-align: middle;

1

2

3

4

5

6

7

8

9

10

11

p{

    display: table-cell;

    vertical-align: middle;

    width: 198px;

    height: 198px;

    border: 1px solid #8900FF;

}

img{

    display: block;

    margin: 0 auto;

}

Salin selepas log masuk

display: table-cell;vertical-align: middle; text-align: center;

1

2

3

4

5

6

7

8

p{

    display: table-cell;

    vertical-align: middle;

    text-align: center;

    width: 198px;

    height: 198px;

    border: 1px solid #8900FF;

}

Salin selepas log masuk

  定位+display: block;transform: translate(-50%,-50%);

1

2

3

4

5

6

7

8

9

10

11

12

13

p{

    position: relative;

    width: 198px;

    height: 198px;

    border: 1px solid #8900FF;

}

img{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    display: block;

}

Salin selepas log masuk

  定位+margin负值

1

2

3

4

5

6

7

8

9

10

11

12

p{

    position: relative;

    width: 198px;

    height: 198px;

    border: 1px solid #8900FF;

}

img{

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -75px 0 0 -75px;

}

Salin selepas log masuk

  定位+margin: auto;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

p{

    position: relative;

    width: 198px;

    height: 198px;

    border: 1px solid #8900FF;

}

img{

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: auto;

    display: block;

}

Salin selepas log masuk

   overflow: hidden;margin值

1

2

3

4

5

6

7

8

p{

    width: 198px;

    height: 198px;

    overflow: hidden;

    border: 1px solid #8900FF;

}

img{ 8     margin: 25px;

}

Salin selepas log masuk

  padding值

1

2

3

4

5

6

p{

2     padding: 25px;

3     width: 148px;

4     height: 148px;

5     border: 1px solid #8900FF;

6 }

Salin selepas log masuk

  用table的属性+vertical-align: middle;实现

1

1 <p>2     <span><img alt="" src="1.jpg" /></span>3 </p>

Salin selepas log masuk

1

2

3

4

5

6

7

8

9

10

11

p{

    display: table;

    width: 198px;

    height: 198px;

    text-align: center;

    border: 1px solid #8900FF;

}

span{

    display:table-cell;

    vertical-align: middle;

}

Salin selepas log masuk

  用background实现

1

1 <p></p>

Salin selepas log masuk

1

2

3

4

5

6

1 p{

2     width: 198px;

3     height: 198px;

4     border: 1px dashed #8900FF;

5     background: url(1.jpg) no-repeat center center;

6 }

Salin selepas log masuk

  效果如下:

  

 原文来自:http://www.cnblogs.com/Ni-F/p/6937931.html 感谢作者分享!

Atas ialah kandungan terperinci 关于用css实现文本和图片垂直水平居中. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan