这两天一直忙着前端UI的事,前端布局这块下了很多工夫,很多第三方布局框架如Bootstrap和layUI等虽然很好使用,但是前端你懂的,实际用起来总得缝缝补补,烦啊。

今天就遇到了一个要让div容器内的元素居中对齐的需求,虽然其他的框架样式也很多,但是不适合我的情况,于是就想办法自己改样式,终于发现了一个方法:就是padding(容器内补)

之前是这样的:

<div class="media" style="border: 1px solid #ddd;">
<div class="media-left pull-left">
<div><img style="border: 1px solid red; width: 60px; height: 60px;" class="img-circle img-responsive" src="img/logo.png" /></div>
</div>
<div class="media-body">
<div>content</div>
</div>
<div class="media-right" >
<div><i class="fa fa-angle-right fa-lg"></i></div>
</div>
</div>

  页面是这样的:

最后想起来:干脆自己做个div容器自己加上对应的内补不就好了吗,这样就能自己调整居中位置了。

<div class="media" style="border: 1px solid #ddd;">
<div class="media-left pull-left" style="border: 1px solid red;">
<div><img style="border: 1px solid red; width: 60px; height: 60px;" class="img-circle img-responsive" src="img/logo.png" /></div>
</div>
<div class="media-body" >
<div style="padding: 18px 15px">content</div> //加上padding,让自己的元素在自己的容器内看起来居中,自己的div容器则在bootstrap的容器中自适应,不用关心
</div>
<div class="media-right" style="padding: 18px 15px">
<div><i class="fa fa-angle-right fa-lg"></i></div>
</div>
</div>

  最后页面居中了

  

使用padding来合理布局自己的容器类的更多相关文章

  1. H5移动前端完美布局之padding

    序上次的提到了H5移动前端完美布局之-margin百分比的使用margin-top(left,right,bottom)的百分比在移动页面布局中对上下左右距离的处理,攻下城外再攘城内,今天看看padd ...

  2. Flutter 布局(二)- Padding、Align、Center详解

    本文主要介绍Flutter布局中的Padding.Align以及Center控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Padding A widget that insets ...

  3. ExtJs4 笔记(14) layout 布局

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  4. 【ExtJS】 布局Layout

    布局用于定义容器如何组织内部子元素和控制子元素的大小. ExtJS中有两种类型的布局:Container容器类布局与Component组件类布局. Containter容器类布局:负责容器内容Extj ...

  5. 浅谈css的栅格布局

    栅格布局想必大家都很了解,我们做页面开发的时候,往往对页面板式的要求很高,如何对各个区域的内容排版,并使之对齐是我们的一大难题.而栅格系统就是我们排版的利器,他支持自动对齐.自动计算边距.流式布局等优 ...

  6. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  7. 使用CSS中margin和padding的基础和注意事项

    在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...

  8. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  9. div盒布局

    最近在应用程序中内嵌webkit浏览器显示网页,网页的布局是自适应的,采用盒布局模型,能够实现较好的自适应效果. <style> html,body { height: 100%; mar ...

随机推荐

  1. Web自动化之Headless Chrome测试框架集成

    使用Selenium操作headless chrome 推荐 简介 WebDriver是一个W3C标准, 定义了一套检查和控制用户代理(比如浏览器)的远程控制接口,各大主流浏览器来实现这些接口以便调用 ...

  2. android自定义View的绘制原理

    每天我们都会使用很多的应用程序,尽管他们有不同的约定,但大多数应用的设计是非常相似的.这就是为什么许多客户要求使用一些其他应用程序没有的设计,使得应用程序显得独特和不同. 如果功能布局要求非常定制化, ...

  3. Android Gradle项目Hotfix热修复技术的接入

    https://github.com/AItsuki/HotFix Issues MAC系统无法自动打包补丁,原因可能是路径分隔符问题 使用谷歌multidex分包后无法注入代码(开启multidex ...

  4. Carries SCU - 4437

    Carries frog has nn integers a1,a2,-,ana1,a2,-,an, and she wants to add them pairwise. Unfortunately ...

  5. 第十篇:K均值聚类(KMeans)

    前言 本文讲解如何使用R语言进行 KMeans 均值聚类分析,并以一个关于人口出生率死亡率的实例演示具体分析步骤. 聚类分析总体流程 1. 载入并了解数据集:2. 调用聚类函数进行聚类:3. 查看聚类 ...

  6. Luogu 3375 【模板】KMP字符串匹配(KMP算法)

    Luogu 3375 [模板]KMP字符串匹配(KMP算法) Description 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 为了减少骗分的情况,接下来 ...

  7. 【网络流24题】最长k可重区间集(费用流)

    [网络流24题]最长k可重区间集(费用流) 题面 Cogs Loj 洛谷 题解 首先注意一下 这道题目里面 在Cogs上直接做就行了 洛谷和Loj上需要判断数据合法,如果\(l>r\)就要交换\ ...

  8. 【BZOJ2157】旅游(树链剖分,Link-Cut Tree)

    [BZOJ2157]旅游(树链剖分,Link-Cut Tree) 题面 Description Ray 乐忠于旅游,这次他来到了T 城.T 城是一个水上城市,一共有 N 个景点,有些景点之间会用一座桥 ...

  9. 【BZOJ3931】【CQOI2015】网络吞吐量(最短路,网络流)

    [BZOJ3931][CQOI2015]网络吞吐量(最短路,网络流) 题面 跑到BZOJ上去看把 题解 网络流模板题??? SPFA跑出最短路,重新建边后 直接Dinic就行了 大火题嗷... #in ...

  10. POJ1743:Musical Theme

    题目 vjudge Sol 先差分 然后求不可重叠最长重复子串 bits/stdc++.h会CE # include <bits/stdc++.h> # define IL inline ...