Fork me on GitHub

李可

导航

css使用

图片在div内垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>RunJS</title>
		<style>
			div{
				line-height: 300px;
				border:1px solid red
			}
			img{
					vertical-align: middle;
				}
		</style>
	</head>
	<body>
		<div id="div1">
				<img src="http://lorempixel.com/400/200/">
		</div>
	</body>
</html>

省略号（block，inline）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div,p{
            width: 100px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            background: red;
        }
        span{
            display: block;/* 先转化成block */
            width: 100px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            background: green;
        }
    </style>
</head>
<body>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</body>
</html>

posted on 2017-08-11 16:06  李可在江湖  阅读(160)  评论(0)  编辑  收藏  举报