大佬教程收集整理的这篇文章主要介绍了html – 垂直对齐中心以外的按钮的内容,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
默认情况下,按钮的内容(放置在表格单元格中的列表中)垂直居中.我该如何删除?如何对齐< button>的内容垂直到顶部?
<table> <tbody> <td> <ul> <li> <button> <div>Content</div>
我在jsFiddle上有一个例子.
button { display: block; position: relative; BACkground-color: pink; width: 100%; min-height: 200px; }
<button> <div>why?</div> <div>are these centered vertically?</div> <div>And how to remove it?</div> </button>
没有具体原因.这是UAs处理按钮的值/内容的位置的方式(包括< button>,< input type =“button”>)1.
好吧,有办法实现这一目标.首先,需要一点背景知识.
但在此之前,您应该注意< div>应该在预期flow contents的地方使用元素.这意味着它们不允许放在< button>内.元素.
根据HTML5 spec(现在处于PR状态):
因此,有效的HTML可能是这样的:
<button> why? <br> are these centered vertically? <br> And how to remove it? </button>
背景
在内联流中,内联级元素(内联,内联块)可以通过vertical-align
属性在父级内垂直对齐.使用除基线以外的值使得内联级元素位于父级的baseline之外的某个位置(这是默认位置).
关键点是taller elements would affect the line box / baseline.
解决方案
首先,为了处理线的位置,我们需要用像< span>这样的包装元素来包装它们.如下:
<button> <span> <!-- Added wrapper --> why? <br> are these centered vertically? <br> And how to remove it? </span> </button>
在父母的情况下 – < button>在这种情况下 – 有一个明确的高度,如果我们可以有一个子元素具有完全相同的父级高度,我们将能够扩展线框的高度,并令人惊讶地使我们想要的流入的孩子 – 嵌套的< span>在这种情况下 – 通过垂直对齐垂直对齐顶部:顶部;宣言.
button { width: 100%; height: 200px; } button > span { display: inline-block; vertical-align: top; } button:after { content: ""; display: inline-block; vertical-align: top; height: 100%; }
最后一个机器人,如果你想使用最小高度而不是高度按钮,你应该使用min-height:inherit;对于伪元素也是如此.
1 Chrome和Firefox也会显示文本输入vertically at the middle的值,而IE8则不显示.
以上是大佬教程为你收集整理的html – 垂直对齐中心以外的按钮的内容全部内容,希望文章能够帮你解决html – 垂直对齐中心以外的按钮的内容所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。