vertical-align

转自： http://www.cnblogs.com/fu277/archive/2012/09/13/2400118.html 1.水平居中 (1) 文本、图片等行内元素的水平居中 　　给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。 (2) 确定宽度的块级元素的水平居中 　　通过设置margin-left:auto;和margin-right:auto;来实现的。 (3) 不确定宽度的块级元素的水平居中 　　方法一: 　　使用table标签，table本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中! 　　将需要居中的部分包含在table标签内，对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中，间接使需要居中的部分水平居中。 　　缺点：增加了无语意标签，加深了标签的嵌套层数。 <style type="text/css">ul{list-style:none; margin:0; padding:0;}.wrap{ width:500px; height:100px;}table{margin-left:auto;margin

一、神奇的两个inline-block 很初级的问题，无聊决定写一个故事。 故事的主人公很简单，两个inline-block元素。代码如下，为了看起来简单明了，写得很简陋。效果图如右。发现有两个问题。 1：两个元素水平有空隙，简单的初始化margin：0好像并没有起想象中的作用，为什么呢 2：两个元素垂直也没有对齐，等高的的行内块元素不应该阿: 二、消除两个inline-block元素水平间距 最终效果 讲解demo <div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a> </div> 1.去空格 元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以： <div class="space"> <a href="##"> 惆怅</a><a href="##"> 淡定</a><a href="##"> 热血</a> </div> 或者是： <div class="space"> <a href="##">惆怅</a ><a href="##">淡定</a ><a href="##">热血</a> </div> 或者是借助HTML注释： <div class="space"> <a href

如下代码所示： <div class="container"> 　　<div style="display: inline-block; height: 100px; width: 100px;"><img src="/myImg.jpg"></div> 　　<div style="display: inline-block; height: 100px; width: 100px;">Good Morning! Sir!</div>　　<div style="display: inline-block; height: 100px; width: 100px;"></div> </div> 容器container的子元素均为inline-block显示，而当子元素中存在图片或文字的时候，子元素的显示会显然不在水平线上，即有的元素会下沉，这一现象与行内元素的对齐有关，要解决该问题，可用vertical-align属性，如下： <div class="container"> 　　<div style="display: inline-block; height: 100px; width: 100px; vertical-align: middle;"><img src="/myImg.jpg"></div> 　　<div style="display: inline-block;

1、display:inline-block;这个属性的设置的卵用： 　　nline-block主要的用处是用来处理 行内非替换元素 的高宽问题的！ 行内非替换元素，比如 span、a等标签 ，正常情况下士不能设置宽高的，加上该属性之后，就可以触发让这类标签 表现得如块级元素一样 ，可以设置宽高。 注意IE6不支持inline-block属性，可以用hack来解决：*display:inline;zoom:1; 2、border:1px solid #aaaaaa;的卵用： 　　就是给我们的块级元素增加一个边框，边框的线条是实线，边框的颜色是#aaaaaa。 3、vertical-align:middle 　　vertical-align 属性设置元素的 垂直对齐 方式。 　　 值 描述 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的 下标 。 super 垂直对齐文本的 上标 top 把 元素的顶端 与行中 最高元素的顶端 对齐 text-top 把 元素的顶端 与 父元素 字体的 顶端对齐 middle 把此元素放置在 父元素 的 中部 。 bottom 把元素的 顶端 与行中 最低的元素的顶端 对齐。 text-bottom 把元素的 底端 与 父元素字体的底端 对齐。 length % 使用 "line-height" 属性的百分比值来排列此元素

谷歌中这样是解释的： 图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。所以在某些时候，图片底部的空隙可能是 2px，而有时可能是 4px 或更多。不同的 font-size 应该也会影响到这个空隙的大小。 解决办法： 给img定义vertical-align或者display：block;，最优的解决办是定义vertical-align，注：定义vertical-align为middle时在IE6中大概还有一像素的顶边距，最好为top或bottom。当然还有种极端解决办法大家可以试试就是将 父容器的字体大小为零，font-size:0 来源： https://www.cnblogs.com/jesse131/p/4769758.html

水平居中 行内元素：给父元素添加 text-align: center;(文本 / 图片) 块级元素： 　　确定宽度：margin: 0 auto; 　　不确定宽度： 1. 把块级元素变成行内元素, display:inline-block; text-align:center; 　　　　　　　　 2. 给父元素设置浮动和相对定位及left: 50%; 子元素相对定位及left: 50%; 　　　　　　　　 3. table{margin: 0 auto;} 垂直居中 父级高度确定 　　单行文本：line-height: height; 　　多行文本、图片: 1. vertical-align:middle; (只有父级元素为td/th,或者图片) <IE8+> 　　　　　　　　　　2. father{display:table;} child{display:table-cell;vertical-align:middle} 用table-cell 来激活 vertical-align;eg：多行文字的水平垂直居中 多行文字的水平垂直居中 <style> .multiLineWordContainer{ display: table-cell; border: 4px solid #beceeb; height: 300px; vertical-align: middle; }

Pandas基础 简书大神SeanCheney的译作，我作了些格式调整和文章目录结构的变化，更适合自己阅读，以后翻阅是更加方便自己查找吧 import pandas as pd import numpy as np 设定最大列数和最大行数 pd.set_option('max_columns', 5, 'max_rows', 10) 1 DataFrame的结构 movie = pd.read_csv('data/movie.csv') movie.shape (4916, 28) 2 访问DataFrame的组件 2.1 组件获取及其类型 columns = movie.columns type(columns) pandas.core.indexes.base.Index columns Index(['color', 'director_name', 'num_critic_for_reviews', 'duration', 'director_facebook_likes', 'actor_3_facebook_likes', 'actor_2_name', 'actor_1_facebook_likes', 'gross', 'genres', 'actor_1_name', 'movie_title', 'num_voted_users', 'cast_total

超级简单好用的图标文字垂直居中对齐方法！！！ 开发中经常会遇到字体图标与文字垂直居中对其的需求，常常使我们感到头疼，无论是设置margin还是padding都不行，上图： 现在推荐大家一种超级简单的方法：vertical-align: -1px; : 我们将字体图标写进span中 < div > < span > & #xa2201 ; < / span > 收藏 < / div > < div > < span > & #xe62c ; < / span > 分享 < / div > 然后给span设置vertical-align负值 span { font - family : 'iconfont' ; font - size : 18 px ; vertical - align : - 3 px ; } 具体负值为多少可据需要调节，ok，搞定： 来源： CSDN 作者： 你头发乱了喔_ 链接： https://blog.csdn.net/dujyong/article/details/103569859

起因 原本想使用 display: inline-block 让这三块元素在水平方向上对齐，但是原本好好的，但是最左侧的元素，里面加了内容之后，就产生了如图所示的问题，元素之间上下偏移了。 解决办法 查了不少文章，最终查明了问题的原因所在。是因为虽然设置了 display: inline-block ，但是三个行内块元素的 基准线 没有对齐，所以导致如图第一个元素下沉的问题。 解决办法如下： 1. vertical-align 使用 vertical-align 可以让元素的垂直基准线向一个方向对齐，在这里，我们可以简单的对第一个元素设置样式 .item1 { display : inline-block ; // 此处省略 vertical-align : top ; } 这样就可以让元素1回到正常的位置，与其他一起对齐啦。 2. overflow: hidden 使用 overflow: hidden 也可以让行内块元素的基准线变为一起 注意事项 在查阅资料的时候发现，使用 display: inline-block 往往会造成元素与元素之间左右有着空格间隔。造成这一情况的原因是在元素之间使用了空格、回车等元素，所以会被识别，所以会出现空格间隔。我们可以将父容器设置 font-size: 0 来隐藏掉这些空格间隙 或者大家查看这篇文章，以解决间隔问题 https://www

1.水平居中 (1) 文本、图片等行内元素的水平居中 　　给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。 (2) 确定宽度的块级元素的水平居中 　　通过设置margin-left:auto;和margin-right:auto;来实现的。 (3) 不确定宽度的块级元素的水平居中 　　方法一: 　　使用table标签，table本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中! 　　将需要居中的部分包含在table标签内，对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中，间接使需要居中的部分水平居中。 　　缺点：增加了无语意标签，加深了标签的嵌套层数。 <style type="text/css">ul{list-style:none; margin:0; padding:0;}.wrap{ width:500px; height:100px;}table{margin-left:auto;margin-right:auto;}.test li{float:left; display:inline; margin-right:5px;