Css attributes common set of records

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
This link: https://blog.csdn.net/setlilei/article/details/99751015

css does not wrap text display extra three points only to display the entry into force of the element inline

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Internal overflow display the slider element

/* 元素必须设置高度生效 */
height: 100%;
overflow-y: scroll;

Horizontal element disposed vertical center

/* 水平居中 直接设置元素的margin: 0 auto */

/* 垂直居中 如下 */
width: 300px;
height: 300px;
position: relative;
top: 50%; /* 偏移 */

/* 向上平移两种方法 如下 */
/* 高度的一半 */
margin-top: -150px;

/* 使div向上平移(translate)自身高度的50% */
transform: translateY(-50%);

Use css3 flex elastically layout Vertical Centering

display: flex;
align-items: center; /* 定义body的元素垂直居中 */
justify-content: center; /* 定义body的里的元素水平居中 */

Set the picture as the background picture does not automatically stretch the clearest remain centered

background: url(/image/test.png) center;
background-repeat: no-repeat;
background-size: auto 100%;
-moz-background-size: 100% 100%;

Two div are set to display: inline-block;occur without the top two div align can be set on the right divvertical-align: top;

.left {
	display: inline-block;
}
.right {
	display: inline-block;
	vertical-align: top; /* 与左侧div顶部对齐 */
}
Continually updated. . .
The horizontal element is provided with reference to vertical center https://www.cnblogs.com/yugege/p/5246652.html

Guess you like

Origin blog.csdn.net/setlilei/article/details/99751015