前端项目开发常见居中问题的解决

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>

效果:

时间: 01-25

前端项目开发常见居中问题的解决的相关文章

vue前端项目开发环境搭建并用npm方式运行

1.下载node.js http://nodejs.cn/download/ 推荐下载 .mis安装包,下一步下一步... 安装完后,通过cmd控制台输入node -v 弹出版本号即成功 2.通过node.js中内置的npm(包/依赖)插件来下载其他开发所需的环境 注意:如设置了代理限制,可通过cmd控制台输入npm config set proxy=http://代理服务器地址:8080 设置代理(网络有代理限制时下载不到依赖包时,按需设置) npm config delete proxy 为

vue项目开发,用webpack配置解决跨域问题

今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理. 1,后端更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 2,使用jsonp进行跨域 getData () { var self = this $.

项目开发遇到的问题及其解决.总结

1.eclipse 导出 doc  出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 ..... SQL:3.mysql  * 必须得放前面 否则  select  *,customer.name from customer ;  You have an error in your SQL syntax;  check the manual that

如何在前端项目中引用bootstrap less?

在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的css类,一旦保存文件,grunt则开始重新构建,生成最后的生产文件.问题是: 如何能够在自己的客制less文件中引入bootstrap的less变量或者mixin呢? 比如:我如何能够实现在屏幕尺寸在@screen-md时,将所有的图片隐藏呢? 对于这个场景,假设项目目录结构如下: > bower_c

vue项目使用前端框架开发,实现滑动效果,若不刷新页面则无法达到预期效果的问题及解决方法

滑动等效果的初始化时机很重要,在vue项目开发中,需到mounted()钩子函数 (当组件中的DOM结构被渲染好并放到页面中后,会执行这个钩子函数,此时即可初始化滑动效果的js代码). 若组件未挂载到页面中,初始化效果无意义,无法获取元素. 因此,若需要操作页面中的元素,需在mounted()钩子函数中,此时DOM元素是最新的. 滑动效果成功后,底部的tabbar按钮的样式mui-tab-item需重新命名,因mui中的js代码与组件发生冲突 原文地址:https://www.cnblogs.c

web项目开发 之 前端规范 --- JavaScript编码规范

JavaScript编码规范 此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范文档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 场景:web前端开发中 一些Javascript的注意事项 和 规格建议: [参考百度资料 和个人一些总结] 1 前言 JavaScript 在百度一直有着广泛的应用,特别是在浏览器端的行为管理.本文档的目标是使 JavaScript 代码风格保持一致,容易被理解和被维护. 虽然本文档是针对 Java

前端webview开发中遇到的一些问题及其解决方法

最近做了一个webview中的兑换页面,本来以为很简单,想不到遇到了远远超出预期数量的BUG,记下来,以备后患. 1 inline-block元素折行 BUG描述:现在我有三个DIV,要在一列等宽排列,设定宽度为33.33333%,想象中应该是正好充满一列. 然而事实是,div折行了=.=,div之间还出现了一个缝隙. 这个问题很常见,出现的原因是浏览器在解析html时认为两个div之间有空格,而一个空格的占位是1/4em. 一般解决的办法是设置父元素font-size=0,然后再给子元素设置字

web项目开发 之 前端规范 --- CSS编码规范

此文严格按照W3C规范和部分实际项目可读性,浏览器加载,性能等众多属性权衡,做出平时前端编码规范 文档.供广大web工作者参考并实施,对维护和项目扩展升级都能省时省力. 转载请注明出处:JS前端实用开发QQ群 :147250970  欢迎加入~! CSS编码规范 1 前言 2 代码风格 2.1 文件 2.2 缩进 2.3 空格 2.4 行长度 2.5 选择器 2.6 属性 3 通用 3.1 选择器 3.2 属性缩写 3.3 属性书写顺序 3.4 清除浮动 3.5 !important 3.6 z

如何用 Android Studio 导入开源项目以及常见错误的解决办法

声明:这篇文章完全来自这篇文章,感谢大神的相助.这篇文章纯粹是为了备份. 本篇以Github上最热门的MaterialDesign库,MaterialDesignLibrary来介绍怎样使用Android Sudio导入开源项目的,如果你和我一样刚刚从Eclipse转到AS,那本篇文章非常适合你. 如果不引入任何第三方库,不做自动化分渠道打包等操作,那可以在完全不了解Gradle的情况下进行Android项目的开发.但如果要想导入Github上的热门项目,必须首先熟悉Gradle. 1. Gra