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.
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. . . |