这个问题说起来有点惭愧,搞了很久才搞定。
本人并不擅长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
分享到:
相关推荐
首先,父元素需设置`position: relative`,然后将子元素(包含文字的`div`)设置为`position: absolute`,并使用`top: 50%`和`transform: translateY(-50%)`组合来实现垂直居中。 ```css .parent { position: ...
效果描述: 在实际网页中,如何实现如何实现父容器... 然后用处理图片垂直居中的方式处理文字的垂直居中即可。 使用方法: 1、将head中的样式复制到你的样式表中 2、将body中的代码部分拷贝过去即可
css 多行文本垂直居中显示,兼容各大浏览器!
本文主要介绍了一种针对文字和图片垂直居中的方法,适用于静态布局。这个方法基于`display:inline-block`和`vertical-align:middle`属性,结合额外元素技巧来实现。 首先,我们需要理解`display:inline-block`属性...
这种方法适用于单行文字,但是在 Internet Explorer 6 及以下版本中,不支持对图片设置垂直居中。 2. 多行未知高度文字的垂直居中 对于多行文字,可以使用 padding 属性设置上下的 padding 值相同,以实现垂直居中...
将同一行的图片和文字垂直居中对齐是网页布局中很常见的需求,但也是细节决定成败的关键点。通过 CSS 的 vertical-align 属性,我们可以很轻松地实现这一点。在实际应用中,除了图片和文字的垂直居中,该属性同样...
div框水平垂直居中跟内容垂直居中
以上就是使用div和CSS实现多行文字垂直居中的几种常见方法,每种都有其适用场景和兼容性考虑。在实际项目中,应根据具体需求和目标浏览器范围选择合适的方法。在提供的"多行文字实现垂直居中.html"文件中,你可以...
标题中的“懒人原生纯css实现多行文字均保持垂直居中效果”是指一种无需依赖JavaScript库(如jQuery)或HTML5特定属性,仅通过CSS实现的多行文本垂直居中的技术。这种技术在网页设计中十分常见,因为用户界面的对齐...
此前给大家推荐了一个纯css实现div容器内图片、文字上下居中的效果,缺点是采用了部分css3样式,兼容性较差,相关链接:纯css实现div容器内图片上下左右居中效果 今天特意在网上找到了一款插件--jquery.valign,可...
对于单独的文字垂直居中,最常用的方法是通过设置`line-height`属性。`line-height`决定了文本行之间的间距,当它的值等于容器的高度时,文字就会在容器内垂直居中。例如: ```css .container { height: 100px; /*...
最后,通过HTML结构将这些CSS类应用到具体的元素上,从而实现了文字和图片的垂直居中。整个示例清楚地展示了不同技术手段在实际页面布局中的运用,从而为网页设计师和前端开发人员提供了多种垂直居中的解决方案。
标题提到的"实现css文字垂直居中的8种方法"涵盖了多种不同的技术,适用于不同场景。以下是对这些方法的详细解释: 1. **绝对定位和负外边距**: 这种方法适用于已知元素高度的情况。通过将元素设置为绝对定位,...
2. **多行未知高度的文字垂直居中** 如果内容的高度是可变的,我们可以利用`padding`来模拟垂直居中。设置上下相同的`padding`值,可以让内容看起来在视觉上居中。例如: ```css div { padding: 25px; } ``` ...
这种方法通过将元素定位为绝对位置,并使用 `top`、`bottom`、`left` 和 `right` 的值为 `0`,然后设置 `margin: auto` 来实现水平和垂直居中。 ```css #content { position: absolute; top: 0; bottom: 0; left...
这种简单有效的方法在多数现代浏览器中表现良好,但在IE6及以下版本中,此方法不支持图片的垂直居中。因此,在设计跨浏览器兼容的页面时,需额外注意。 ### 多行未知高度文字的垂直居中 当文本内容高度不定时,...
则让文字垂直居中。 最后,保存文档,并在浏览器中预览效果,可以看到文字在div内实现了水平和垂直居中。 要注意的是,对于多行文本的垂直居中,可能需要采用更复杂的方法,例如使用Flexbox布局或CSS的定位属性等...