这个问题说起来有点惭愧,搞了很久才搞定。
本人并不擅长CSS,至少在布局这块到现在还是一片糊涂。
不知道是不是对android布局太了解了,还是其他什么原因,我总是在html+css中想着采用android中的线性布局啊,相对布局啊什么的。
可是,一个很简单的布局都搞不定。
具体看图:
很简单的一个布局,看出问题了吗?文字需要垂直居中怎么办?
这个图对应的基本html如下:
<div class="btn_blue" onclick="">
<img src="img/facebook_login.png" style="width:40px;height:40px;"><span>Login with Facebook</span>
</div>
这个问题我先后采用了vertical-align:middle;height:50px;line-height:50px;等这种方法都没能很好的解决。直到我采用了如下方法:
<div class="btn_blue" onclick="">
<span style="vertical-align:middle;display:inline-block; background:url(img/facebook_login.png) top left no-repeat; width:40px; height:40px;"></span>
<span style="vertical-align:middle;margin-left:32px;">Login with Facebook</span>
</div>
我发现使用html+css布局的时候,非常的糟糕,html可以布局但很弱,css也可以布局但难以理解,两者混用又很乱。
在这一点上android就显得非常“先进”,很容易让人理解,一看图片就基本能断定采用什么布局;相反,使用html+css就不能马上判断出他是什么结构,如何对齐,必须在浏览器中试过才知道,有时候一个简单的效果要写很多CSS,还要和具体的html元素关联起来,很不通用,所以,我认为html+css是一种很糟糕的技术,否则也不会产生那么多JS框架,CSS框架了。
拙见 谅解
- 大小: 5.3 KB
分享到:
相关推荐
本文实例讲述了CSS实现同一行的图片和文字垂直居中对齐的方法。分享给大家供大家参考。具体分析如下: 有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于...
div中多行文字垂直居中
效果描述: 在实际网页中,如何实现如何实现父容器... 然后用处理图片垂直居中的方式处理文字的垂直居中即可。 使用方法: 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可
div框水平垂直居中跟内容垂直居中
css 多行文本垂直居中显示,兼容各大浏览器!
div+css多行文字实现垂直居中,高度可自动适应
此前给大家推荐了一个纯css实现div容器内图片、文字上下居中的效果,缺点是采用了部分css3样式,兼容性较差,相关链接:纯css实现div容器内图片上下左右居中效果 今天特意在网上找到了一款插件--jquery.valign,可...
CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到
其实很简单,只需要在尾部增加一个<i></i> ,然后把需要垂直居中的元素设置display:inline-block; vertical-align:middle; 看看效果图 实例代码 复制代码代码如下:<style>*{ margin:0 ; padding:0;}.bg{ ...
以示例的方式介绍了css如何实现文字图片垂直居中效果,需要的朋友可以参考下
css 垂直居中.docx
6.3.5 修饰图片的水平和垂直居中 6.4 字体的综合属性 6.4.1 字体的选择 6.4.2 字体的大小 6.4.3 字体的加粗 6.4.4 字体的样式 6.4.5 字体的变形 6.4.6 字体属性的简写 6.5 文本的修饰和链接 6.5.1 文本的修饰 6.5.2 ...
单独文字垂直居中想必大家都会了吧,那么文字与图片同排如何实现垂直居中呢?感兴趣的朋友可以了解下面的教程
多行文本垂直居中的CSS需要这么设置: 复制代码代码如下: /*多行居中对齐的方法,width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性,且div不能浮动*/ .vcenter { width: 100px; ...
css实现文字垂直居中的代码
DIV内多行文字垂直居中,并且超过固定行数时显示省略号
利用百分比控制文字上下居中,纯css控制,div布局,通过百分比控制文字垂直居中
CSS3手机移动端上下左右居中代码是一款基于css3实现的上下左右垂直居中效果。