企业网站网页设计有哪些,上海搬家公司收费标准,在屈臣氏做网站运营,电商类网站开发定制水平居中 内部块级元素的宽度要小于容器(父元素)
方案一#xff1a;文本居中对齐#xff08;内联元素#xff09; 限制条件#xff1a;仅用于内联元素 display:inline 和 display: inline-block; 给容器添加样式
text-align:center!DOCTYPE html
html lang文本居中对齐内联元素 限制条件仅用于内联元素 display:inline 和 display: inline-block; 给容器添加样式
text-align:center!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {margin: 30px 30px 0px 300px;border: 1px solid gray;text-align: center;}.item {display: inline-block;width: 400px;background: yellow;}/style/headbodydiv classboxspan水平居中 -- display: inline/span/divdiv classboxdiv classitem水平居中 -- display: inline-block/div/div/body
/html方案二自动外边距块级元素 限制条件仅用于块级元素 display:block; 给内部元素添加样式
margin: auto!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {margin: 30px;border: 1px solid gray;}.item {margin: auto;width: 300px;background: yellow;}/style/headbodydiv classboxdiv classitem水平居中 -- 块级元素 display:block/div/div/body
/html方案三flex布局【推荐】
给容器添加样式
display: flex;
justify-content: center;!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {margin: 30px 30px 0px 300px;border: 1px solid gray;display: flex;justify-content: center;}.item {width: 400px;background: yellow;}/style/headbodydiv classboxspan水平居中 -- flex布局 display: inline/span/divdiv classboxdiv classitem水平居中 -- flex布局 display: block/div/div/body
/html方案四子绝父相 transform CSS3 限制条件浏览器需支持CSS3比较老的浏览器不适用 给容器父元素添加样式 position: relative给内部元素添加样式
position: absolute;
left: 50%;
transform: translate(-50%, 0);!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 50px;position: relative;}.item {background-color: yellow;position: absolute;left: 50%;transform: translate(-50%, 0);}/style/headbodydiv classboxspan classitem水平居中 -- 子绝父相 transform/span/div/body
/html方案五子绝父相 自动外边距 指定宽度 限制条件内部元素需限定宽度 给容器父元素添加样式
position: relative给内部元素添加样式
position: absolute;
left: 0;
right: 0;
margin: auto;!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 50px;position: relative;}.item {background-color: yellow;position: absolute;left: 0;right: 0;margin: auto;width: 300px;}/style/headbodydiv classboxspan classitem水平居中 -- 子绝父相 自动外边距/span/div/body
/html方案六子绝父相 负外边距 知道宽度 宽度计算 限制条件需知道内部元素的宽度无法预知宽度的内联元素和未知宽度的块级元素都不适用 给容器父元素添加样式
position: relative给内部元素添加样式
position: absolute;
left:50%;
margin-left:-内部元素宽度的一半!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {width: 400px;background: yellow;position: absolute;left: 50%;margin-left: -200px;}/style/headbodydiv classboxdiv classitem水平居中 -- 绝对定位元素 position:absolute/div/div/body
/html垂直居中 内部块级元素的高度要小于容器(父元素)
方案一行高 容器高度单行内联元素 限制条件仅用于单行内联元素 display:inline 和 display: inline-block; 给容器添加样式 height: 100px;line-height: 100px;!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {margin: 30px;border: 1px solid gray;height: 100px;line-height: 100px;}/style/headbodydiv classboxspan classitem垂直居中 -- 内联元素 display:inline/span/div/body
/html方案二flex布局【推荐】
给容器添加样式
display: flex;
align-items: center;方案三子绝父相 transformCSS3 限制条件浏览器需支持CSS3比较老的浏览器不适用 给容器父元素添加样式 position: relative给内部元素添加样式
position: absolute;
top: 50%;
transform: translate(0, -50%);!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {position: absolute;top: 50%;transform: translate(0, -50%);background-color: yellow;}/style/headbodydiv classboxdiv classitem垂直居中 -- 子绝父相 transform/div/div/body
/html方案四子绝父相 自动外边距指定高度 限制条件内部元素需限定高度 给容器父元素添加样式
position: relative给内部元素添加样式
position: absolute;
top: 0;
bottom: 0;
margin: auto;内联元素也有效因为内联元素绝对定位后display 会变为 block !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {position: absolute;top: 0;bottom: 0;margin: auto;background-color: yellow;height: 50px;}/style/headbodydiv classboxspan classitem垂直居中 -- 子绝父相 自动外边距/span/div/body
/html方案五子绝父相 负外边距 知道高度 高度计算 限制条件需知道内部元素的高度 给容器父元素添加样式
position: relative给内部元素添加样式
position: absolute;
top: 50%;
margin-top: -内部元素高度的一半;!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {margin: 30px;border: 1px solid gray;height: 100px;position: relative;}.item {position: absolute;top: 50%;margin-top: -25px;height: 50px;background-color: yellow;}/style/headbodydiv classboxspan classitem垂直居中 -- 子绝父相 负外边距/span/div/body
/html水平垂直居中 参考上文分别实现水平居中和垂直居中即可常用方案如下
方案一flex布局【推荐】
给容器添加样式
display: flex;
justify-content: center;
align-items: center;方案二子绝父相 transform CSS3 限制条件浏览器需支持CSS3比较老的浏览器不适用 给容器父元素添加样式 position: relative给内部元素添加样式
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);方案三子绝父相 自动外边距指定高度和宽度
给容器父元素添加样式
position: relative给内部元素添加样式
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;方案四子绝父相 负外边距 知道宽度和高度 宽度和高度计算 限制条件需知道内部元素的宽度和高度 给容器父元素添加样式 position: relative给内部元素添加样式
position: absolute;
left:50%;
margin-left:-内部元素宽度的一半;
top: 50%;
margin-top: -内部元素高度的一半;!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle.box {margin: 30px 30px 0px 300px;border: 1px solid gray;height: 100px;position: relative;}.item {background-color: yellow;position: absolute;left: 50%;margin-left: -150px;top: 50%;margin-top: -25px;width: 300px;height: 50px;}/style/headbodydiv classboxspan classitem水平垂直居中 -- 子绝父相 负外边距/span/div/body
/html
