您现在的位置是：网站首页> 编程资料编程资料

css自适应宽度多种方法实现宽度自适应的水平居中让图片 div居中实现代码CSS里的各种水平垂直居中基础写法心得总结css图片垂直居中 css中如何实现图片垂直居中div图片垂直居中如何使div中图片垂直居中css中margin:0 auto居中问题深入探讨div垂直居中的N种方法单行/多行文字(未知高度/固定高度)表单元素垂直居中完美解决方案元素及文本的居中(层的横向居中/层的垂直居中/绝对居中)三种方式实现元素水平居中显示与固定布局和流式布局概念理解元素及文本的水平居中/垂直居中/绝对居中总结

2021-09-07 709人已围观

简介宽度自适应达到水平居中在网页制作中很常见而且很实用，本文整理搜集了一些实用的自适应宽度的水平居中技巧，感兴趣前端工程师们可以借鉴一下，或许对你有所帮助

当父元素和子元素都没有定义宽度的情况下实现水平居中：

display:inline-block
可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。
HTML代码:

复制代码

代码如下:

CSS代码:

复制代码

代码如下:

.navbar {
text-align:center;
}
.navbar ul {
display:inline-block;
}
.navbar li {
float:left;
}
.navbar li + li {
margin-left:20px;
}

IE系列IE8+支持，要IE7 IE6 支持需要加入以下代码使display:inline像display:inline-block一样

复制代码

代码如下:

.navbar ul {
*display:inline;
*zoom:1;
}

position:relative
使用position:relative与float相结合的技巧及其浮动和定位参照物的关系，这个技巧需要两个父元素，一个用来定位而另外一个用来避免出现滚动条。
HTML代码:

复制代码

代码如下:

CSS代码:

复制代码

代码如下:

.navbar {
overflow:hidden;
}
.navbar > div {
position:relative;
left:50%;
float:left;
}
.navbar ul {
position:relative;
left:-50%;
float:left;
}
.navbar li {
float:left;
}
.navbar li + li {
margin-left:20px;
}

IE7下需要加入下列代码支持：

复制代码

代码如下:

.navbar {
position:relative;
}

display:table
如果向使用极少的标签实现，这个方法是个不错的选择。
HTML代码:

复制代码

代码如下:

CSS代码:

复制代码

代码如下:

.navbar {
display:table;
margin:0 auto;
}
.navbar li {
display:table-cell;
}
.navbar li + li {
padding-left:20px;
}

不支持IE7及一下浏览器，其他的主流浏览器都支持。

display:inline-flex
这个方法需要使用 flex-layout 的知识。
HTML代码:

复制代码

代码如下:

CSS代码:

复制代码

代码如下:

.navbar {
text-align:center;
}
.navbar > ul {
display:-webkit-inline-box;
display:-moz-inline-box;
display:-ms-inline-flexbox;
display:-webkit-inline-flex;
display:inline-flex;
}
.navbar li + li {
margin-left:20px;
}

使用CSS fit-content 值
下面看看如何用fit-content创建一个包含子元素浮动的未知宽度的导航。
HTML代码:

复制代码

代码如下:

CSS代码:

复制代码

代码如下:

.center ul{
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}

浏览器支持度较低只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。
这个方式是推动浏览器发展的一个新的东西，目前供应于所以可以写前缀的浏览器，并没有工作在IE9和IE9以下。
根据你的需求来选择合适的方法吧，display:inline-block兼容性较好，flex-box将会用于未来。

演示

上一篇：如何定义html hr 样式(多种效果)关于hr标记在各浏览器中的问题说明hr 样式实现1px直线HTML教程：html水平线段

下一篇：CSS中的EM属性之弹性布局纯CSS3弹性框布局实现的渐变色波动列动画效果源码css flex 弹性布局详解CSS3弹性布局内容对齐（justify-content）属性使用详解CSS3弹性伸缩布局之box布局实例讲解CSS3中的box-flex弹性盒属性布局CSS3弹性盒模型flex box快速入门心得(必看篇)几个CSS3的flex弹性盒模型布局的简单例子演示基础的CSS3弹性盒Flexbox布局使用实例CSS3 Flex 弹性布局实例代码详解

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢