CSS
语言:
CSSSCSS
确定
body {
min-width: 320px;
overflow-x: hidden;
}
body h1 {
padding-bottom: 5px;
border-bottom: 4px solid #333;
}
body img {
max-width: 100%;
}
.text-center {
text-align: center;
}
.vertical-middle {
vertical-align: middle;
display: table-cell;
}
#wrapper {
padding: 20px;
width: 320px;
margin: 0 auto;
}
.block {
margin-bottom: 40px;
}
.block h2.block-head {
border-bottom: 1px solid #ccc;
}
.block .image-block {
background: #f1f1f1;
padding: 20px;
}
.block-2 .image-block {
width: 100%;
margin: 0 auto;
}
.block-3 .image-block {
display: table;
width: 100%;
}
.block-3 .image-block .vertical-middle {
/* adding height to demo vertical alignment */
height: 400px;
}
.block-3 .image-block img {
height: auto;
}
.block-4 .image-block {
position: relative;
/* this method needs a specified height */
min-height: 400px;
}
.block-4 .image-block img {
position: absolute;
height: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
/* this method needs img width to be specified */
width: 150px;
overflow: auto;
margin: auto;
}
.block-5 .image-block {
position: relative;
/* this method requires min height*/
min-height: 400px;
}
.block-5 .image-block img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.block-6 .image-block {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.block-7 .image-block {
position: relative;
min-height: 400px;
}
.block-7 .image-block img {
width: 150px;
height: auto;
position: absolute;
/* 75px is the 50% of the image's width (150)*/
top: calc(50% - 75px);
left: calc(50% - 75px);
}