首页 > 代码库 > 前端项目开发常见居中问题的解决
前端项目开发常见居中问题的解决
div中内容水平居中的常见设置方法:
主要代码来自于http://www.cnblogs.com/mawuhen/p/4055347.html
1.div限高,内容长度只一行
.v-align{ /*设置div水平居中*/ margin: 0 auto; width: 200px; /*设置内容垂直居中===》height的值等于line-height的值*/
height: 80px; line-height: 80px; /*设置内容水平居中*/ text-align: center; background-color: yellow; border: 1px solid #000; }
<div class="v-align">我的内容只能有一行。</div>
效果:
2.div限高,内容不限
.v-align{ margin: 0 auto; height: 100px; width: 200px; border: 1px solid #000; /*设置如果内容溢出div,则内容会被修剪,而且其余内容不可见*/ overflow: hidden; } .v-align .empty, .v-align .text{ /*将两个span设置为块状元素*/ display: inline-block; /*垂直居中对齐*/ vertical-align: middle; }
<div class="v-align"> <span class="empty"></span> <span class="text"> 我的内容不限,无论多高都行。<br />换行也可以。 </span>
</div>
效果:
3.div高度不定,内容高度一定
.v-auto{ margin: 0 auto; width: 200px; border: 1px solid black; position: relative; background-color: #87CEEB; } .v-auto .text{ height:100px; top: 50%; background-color: greenyellow; position: absolute; margin-top:-50px; border: 1px dashed #ddd; }
<div class="v-auto"> <div class="text">我的高度是固定的,只有100px高,但是我的父元素高度不定,怎么垂直居中呢?</div> <br /><br /><br /><br /><br /><br /><br /> </div>
效果:
4.div高度不定,内容高度不定
.auto-out { position: relative; margin: 0 auto; width: 200px; border: 1px solid #ddd; background-color: #87CEEB; } .auto-out .auto-in { position: absolute; top: 50%; border: 1px dashed #ddd; background-color: indianred; /* 这里有兼容性问题 */ -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
<div class="auto-out"> <div class="auto-in"> 我的高度不定,我的父元素高度不定,现在要求垂直居中,求css设置。。。。。 </div> <br /><br /><br /><br /><br /><br /><br /> </div>
效果:
前端项目开发常见居中问题的解决
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。