HTML5中间对齐表格数据(HTML5 middle align in table data)
我有一个大表,这是该表的最后一行:
Back
value="${placeholder.placeholder_id}">Delete
在我的最后一个td内部有两个按钮(这是一个很好的方法吗?)。 我想要做的是中间对齐“后退”和“删除”按钮,使它们看起来不错。 现在它看起来像一个曲折(见图)。 我已经为这些按钮添加了id或class -tags,并尝试使用bottom,left,display,float等命令移动它们,但没有结果。
我不能制作两个td(一个按钮一个td),因为td之间有太多空间。
我该怎么办?
I have a big table and this is the last row of that table:
Back
value="${placeholder.placeholder_id}">Delete
Inside my last td there are two buttons inside forms (is this good way to do it?). What I want to do is to middle align both "Back" and "Delete" buttons so that they look nice. Now it looks like a zigzag (see picture). I've given id or class -tags to those buttons and tried to move them with bottom, left, display, float etc. commands with no results.
I can't make two td's (one td for one button) because there is so much space between td's.
What should I do?
原文:https://stackoverflow.com/questions/21916358
更新时间:2019-11-05 06:52
最满意答案
[编辑]这是一个jsFiddle来演示。 [/编辑]
表单是块级元素,只需将它们转换为inline-block ,它们就可以很好地并排放置。
Back Delete |
样式作为样式表的一部分会更好地完成,但为了简单起见,这里将其添加为样式属性。
[edit] Here is a jsFiddle to demonstrate. [/edit]
Forms are block-level elements, simply turn them into inline-block and they'll sit nicely side-by-side.
Back Delete |
The styling would be better done as part of your stylesheet, but added here as style attributes for simplicity.
相关问答
[编辑]这是一个jsFiddle来演示。 [/编辑] 表单是块级元素,只需将它们转换为inline-block ,它们就可以很好地并排放置。
Back ... 您只需要在stickycol css类中添加几个css属性。 align-items:center和display:flex用于真正对齐 justify-content和text-align用于水平对齐。 看到片段。 table { border-collapse: separate; border-top: 3px solid grey; } td, th { ... 您可以使用flexbox。 .container { display: flex; align-items: center; } .container button { margin-left: .5em; } |
Text Not In Middle Of Cell Bu ... UITableView是UIScrollView的子类,因此您可以使用: scrollRectToVisible: animated: 并自己计算CGRect,这样你就可以获得比使用更多的控制: scrollToRowAtIndexPath UITableView is a subclass of UIScrollView so you can use: scrollRectToVisible: animated: ... 你为什么用桌子? 我认为这更好: HTML: 5 3 + 1 2 CSS: .fraction{ display:inline-block; vertical-align:middle; } .fraction>span ... 您不应该对表使用display属性,因为它已经具有属性display: table 。 将表包裹在div中,并将样式display: inline-block到该div。 .table-wrap { display: inline-block; vertical-align: middle; } img { vertical-align: middle; } td { padding: 10px; border: solid 1px black; } ... 知道为什么firefox会改变属性的值吗? 因为middle 是 RFC 1866(HTML 2.0) , HTML 3.2和HTML 4中定义的正确值,而不是center 。 img元素上的align属性从未将center作为可能的值,因为center历来总是指水平对齐(浮动),并且不能将图像浮动到线的中心。 当时的其他实现,例如IE, 确实允许center作为可能的值,具有与middle相同的含义(参见Stefan的回答),因此我的猜测是Firefox提供互操作,同时仍然通过对值进行别名来遵守 ... 不, tfoot只能在一个表中出现一次 ,并且必须在任何tbody或tr元素之前,并且在任何thead元素之后(我已经在其他元素上进行了掩饰,请参阅链接了解详情)。 为了得到你正在谈论的效果,你可能会使用多个tbody元素,即使在语义上当然是不正确的。 或者,您可以使用多个表(嵌套或仅一个接一个)。 No, tfoot can only appear in a table once, and must be before any tbody or tr elements, and after an ... 不使用浮动,但显示:) 测试片段在整页模式 display:inline-block; 与HTML注释抹去white-space : .half-width-img { width: 50%; display: inline-block; vertical-align: middle; } .half-width-text { width: 50%; height: auto; display: inline-block; box-sizing: bo ... 是的,您需要从.data中移除position: absolute ,并在.bar-chart-bar中绝对位置并相应地设置z-index: .bar-chart-bar { background-color: #e8e8e8; display: block; position: absolute; width: 100%; height: 20px; top: 0; left: 0; z-index: -1; } https://jsfiddle.net/jam ... |