zoukankan      html  css  js  c++  java

  • [CSS]图片、多行文本、多行文本与图片的水平垂直居中

    图片垂直居中：IE8+支持
    方法1
    1. .box {
    2.     line-height:300px;
    3.     text-align:center;
    4. }
    5. .box>img {
    6.     vertical-align:middle;
    7. }

    方法2：添加空元素
    1. <!DOCTYPE HTML>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>test</title>
    6. 		<style>
    7. 			p {
    8. 				border:1px solid red;
    9. 				background:#eee;
    10. 				text-align:center;
    11. 				height:300px;
    12. 				
    13. 			}
    14. 			img {
    15. 				width:200px;
    16. 				height:200px;
    17. 				vertical-align:middle;
    18. 			}
    19. 			i {
    20. 				display:inline-block;
    21. 				height:100%;
    22. 				border:1px solid green;//可选
    23. 				vertical-align:middle;
    24. 			}
    25. 			
    26. 		</style>
    27. 	</head>
    28. 	<body>
    29. 		<p>
    30. 			<img src="1t.jpg" /><i></i>
    31. 		</p>
    32. 	</body>
    33. </html>



    多行文本垂直居中：IE8+支持
    方法1：
    1. .box {line-height:300px;}
    2. .box>span {
    3.     display:inline-block;
    4.     line-height:normal;
    5.     vertical-align:middle;
    6. }

    方法2：添加空元素
    1. <!DOCTYPE HTML>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>test</title>
    6. 		<style>
    7. 			p {
    8. 				border:1px solid red;
    9. 				background:#eee;
    10. 				text-align:center;
    11. 				height:300px;
    12. 				
    13. 			}
    14. 			span {
    15. 				display:inline-block;
    16. 				vertical-align:middle;
    17. 			}
    18. 			i {
    19. 				display:inline-block;
    20. 				height:100%;
    21. 				border:1px solid green;//可选
    22. 				vertical-align:middle;
    23. 			}
    24. 		</style>
    25. 	</head>
    26. 	<body>
    27. 		<p>
    28. 			<span>美国神婆星座网测试栏目提供心理测试、星座测试、星座配对测试、<br/>测试题等心里测试大全,了解更多心理测试大全分析就到<br/>美国美国神婆星座网测试栏目提供心理测试、星座测试、星座配对测试、</span><i></i>
    29. 		</p>
    30. 	</body>
    31. </html>



    多行文本与图片垂直居中：
    1. <!DOCTYPE HTML>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>test</title>
    6. 		<style>
    7. 			p {
    8. 				border:1px solid red;//可选
    9. 				background:#eee;
    10. 				line-height:300px;
    11. 			}
    12. 			img {
    13. 				width:200px;//可选
    14. 				height:200px;//可选
    15. 				vertical-align:middle;
    16. 			}
    17. 			span {
    18. 				width:250px;//可选
    19. 				line-height:normal;
    20. 				display:inline-block;
    21. 				vertical-align:middle;
    22. 			}
    23. 		</style>
    24. 	</head>
    25. 	<body>
    26. 		<p>
    27. 			<span>美国神婆星座网测试栏目提供心理测试、星座测试、星座配对测试、<br/>测试题等心里测试大全,了解更多心理测试大全分析就到美国</span><img src="1t.jpg" />
    28. 		</p>
    29. 	</body>
    30. </html>
  • 相关阅读:
  • 原文地址：https://www.cnblogs.com/enginex/p/6813707.html
  • 热门文章
Copyright © 2011-2022 走看看