css中div中的内容居中

第一种使用table标签（很少用）

css代码

/*
使用table包裹要居中的元素，因为table有自适应的设置
然后将table居中即可。

*/
table{
    margin: 0px auto;
}

html中的代码

<div><table><tbody><tr><td><ul><li>这个内容是使用table自动居中的1</li><li>这个内容是使用table自动居中的2</li><li>这个内容是使用table自动居中的3</li></ul></td></tr></tbody></table>
</div>

第二种、将div变成行级元素然后使用text-align:center来居中

css代码

.container{background: gray;/*   实现的方法就是将这个块级元素变成行级元素，然后将这个行级元素里面的内容居中所以会显示的居中 */display: inline;text-align: center;
}

html代码

<div class="container"><div>这个是一个没有指定宽度的div,要让它自动居中</div>
</div>

第三种方式、集合float、position、left来完成

css代码

/*第三种居中方式就是将父类元素定义成position: relative;float: left;left: 50%;子类元素定义的一样，只是将这里的left: -50%;*/.three{position: relative;float: left;left: 50%;background: pink;}.threeCenter{position: relative;float: left;left: -50%;background: green;}

html代码

<div class="three"><div class="threeCenter">这是第三种居中的方式</div>
</div>

第四种方式、使用position、left、top、translate来完成

css代码

.four{position: relative;background: yellow;left: 50%;top: 50%;
}
.fourChild{position: absolute;transform: translate(-50%, -50%);
}

html代码

<!-- 第四种方式-->
<div class="four"><div class="fourChild">第四种方式居中方式..</div>
</div>

效果如下：

css中div中的内容居中相关推荐

学习使用CSS实现div中的内容垂直居中的方法
学习使用CSS实现div中的内容垂直居中的方法一.行高(line-height)法二.内边距(padding)法三.模拟表格法四.CSS3的transform来实现五:css3的box方法实 ...
html代码字号div style=,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
div怎么在css中设置字体大小,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
html 自动包裹内容,CSS 实现div宽度根据内容自适应
在实际应用中,可能有这样的需求,那就是需要div根据内容进行宽度自适应.有很多开发者可能误以为如果不设定div的宽度就可以实现宽度随内容自适应,其实这是错误的,因为在默认状态下,div的宽度值是百分之 ...
html中div不在火狐居中,Firefox嵌套CSS中div标签居中问题解决方法
本文和大家重点讨论一下Firefox嵌套CSS中div标签的居中问题的解决方法,主要包括使用line-height垂直居中,清除容器浮动,不让链接折行,始终让Firefox显示滚动条等内容. Fire ...
HTML怎么在背景中加视频,css – 在div中嵌入视频作为背景(bootstrap)
我试图在div中添加一个视频作为背景(.form-container),过去我对完整背景页面做同样的事情,但在这种情况下我只需要在div中,问题:dunno how要做到这一点,我正在玩宽度,但视频不 ...
html中div中加颜色,css怎样给div加边框颜色
css怎样给div加边框颜色 1.css为div四个边分别添加边框border-color:#000(设置4边边框颜色为黑色) border-color:+颜色值,即可设置对象边框颜色 border- ...
CSS总结div中的内容垂直居中的五种方法
一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
CSS总结div中的内容垂直居中的四种方法
一.行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

css中div中的内容居中

css中div中的内容居中相关推荐

最新文章

热门文章