css CSS对齐和大小调整片段
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css CSS对齐和大小调整片段相关的知识，希望对你有一定的参考价值。
/* FROM: http://flippinawesome.org/2013/11/25/css-alignment-and-sizing-snippets/ */
/* Alignment */
/*Horizontally and vertically
Dynamically sized elements.*/
.parent { position: relative; }
.child {
position: absolute;
left: 50%;
top: 50%
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*Chrome Firefox Internet Explorer Opera Safari
4.0 3.6 9 10.5 3.1*/
/*Statically sized elements.*/
.parent { position: relative; }
.child {
position: absolute;
left: 50%;
top: 50%
height: 250px;
width: 500px;
/* Translate element based on it's size */
margin-left: -125px;
marign-top: -250px;
}
/*Chrome Firefox Internet Explorer Opera Safari
1.0 1.0 4.0 7.0 1.0*/
/*With percentages*/
.parent { position: relative; }
.child {
position: absolute;
height: 50%;
width: 50%;
left: 25%; /* (100% - width) / 2 */
top: 25%; /* (100% - height) / 2 */
}
/*Chrome Firefox Internet Explorer Opera Safari
1.0 1.0 4.0 7.0 1.0*/
/*Horizontally*/
/*Block elements with a width value.*/
.block {
margin-left: auto;
margin-right: auto;
}
/*Chrome Firefox Internet Explorer Opera Safari
1.0 1.0 6.0 3.5 1.0*/
/*Inline and inline-block elements.*/
.parent { text-align: center; }
.child { display: inline-block; }
/*Chrome Firefox Internet Explorer Opera Safari
1.0 3.0 8.0 7.0 1.0*/
/*Vertically*/
/*Inline and inline-block elements in a static parent.*/
.parent { line-height: 500px; }
.child {
display: inline-block;
vertical-align: middle;
}
/*Chrome Firefox Internet Explorer Opera Safari
1.0 3.0 8.0 7.0 1.0*/
/*Faking tables.*/
.parent { display: table; }
.child {
display: table-cell;
vertical-align: middle;
}
/*Chrome Firefox Internet Explorer Opera Safari
1.0 1.0 8.0 7.5 1.0*/
/*Sizing*/
/*The following creates a full-sized block element, but it fails with borders, margins and padding. The box-sizing property prevents it from becoming larger as is intended.*/
html { min-height: 100%; }
body { height: 100%; }
.block {
height: 100%;
width: 100%;
-webkit-border-sizing: border-box;
-moz-border-sizing: border-box;
border-sizing: border-box;
}
/*Chrome Firefox Internet Explorer Opera Safari
1.0 1.0 8.0 7.0 3.0*/
/*The next snippet creates a full-sized block element for full screen that doesn’t rely on box-sizing for margin and padding. You can set values to create space for things like headers.*/
html { min-height: 100%; }
body { height: 100%; }
.center {
position: absolute; /* or fixed */
bottom: 0;
left: 0;
right: 0;
top: 0; /* top: 50px; would reserve 50px for an header */
}
/*Chrome Firefox Internet Explorer Opera Safari
1.0 3.0 7.0 4.0 2.0.2*/
/*Next we create an absolute element that’s always equal or larger than the viewport, based on the document’s height.*/
html {
position: relative;
min-height: 100%;
}
body { height: 100%; }
.block {
min-height: 100%;
position: absolute;
}
/*Chrome Firefox Internet Explorer Opera Safari
1.0 3.0 7.0 4.0 2.0.2*/以上是关于css CSS对齐和大小调整片段的主要内容，如果未能解决你的问题，请参考以下文章