html – 如何浮动：右键在中间垂直对齐

发布时间：2020-12-14 23:12:52 所属栏目：资源来源：网络整理

导读：我只是无法使用类对齐的按钮在中间垂直对齐. HTML： CSS： .panel-footer { height: 70px; vertical-align: middle; border: solid;}.header-footer-item { display: inline-block; line-height: 70px; border: solid red;}.align-right { float: right;}.al

我只是无法使用类对齐的按钮在中间垂直对齐.

HTML：


CSS：

.panel-footer {
    height: 70px;
    vertical-align: middle;
    border: solid;
}

.header-footer-item {
    display: inline-block;
    line-height: 70px;
    border: solid red;

}

.align-right {
    float: right;
}

.align-middle {
  vertical-align: middle;
}

这是jsfiddle：
https://jsfiddle.net/d1vrqkn9/2/
如果我从按钮中删除浮动：它可以正常工作,但我想要它在右边.
如果我将header-footer-item从inline-block更改为inline,则浮动按钮会在其包含的元素上方呈现,我认为这违反了规则:(在此处接受的答案中为#4) – 尽管父元素是垂直的在中间对齐.
我按照CSS Vertical align does not work with float增加了线高
最大的问题是 – 我该如何解决？我也有兴趣知道为什么使子元素(按钮)向右浮动使得父元素(span)不再在包含div中垂直对齐(但仅当它是内联块,而不是内联时). …最后,浮动箱的外部顶部是否高于其内部顶部的“违反规则”(https://www.w3.org/TR/CSS21/visuren.html#float-rules,#4)？ …如果页眉 – 页脚项是内联的,它显然是明确的.
有很多问题关于垂直对齐你认为他们会为css做的事情“认真地,垂直地对齐这个东西 – 无论如何,没有抱怨,只是这样做：sudo force vertical-align：middle！important or important or I ‘为你而来“


最佳答案
最好和最干净的方法是使用这样的flex：
>添加显示：flex到你的外部div面板页脚[检查下面的代码]
>删除浮动并在按钮的范围上使用text-align：right. [检查以下代码]
>将align-self：center添加到内跨距. [检查以下代码]
1：

.panel-footer {
    height: 70px;
    border: solid;
    display:flex;
}

2：

.header-footer-item {
        text-align: right;
}

3：

.header-footer-item {
    align-self: center;
}

jsFiddle：https://jsfiddle.net/d1vrqkn9/4/
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!