垂直对齐不能在div上工作 [英] Vertical align not working on div

问题描述

我试图垂直对齐一个div，但由于某种原因，它根本不起作用。我在做什么错了？

body {border：1px solid red; height：500px;}＃contactUs {border：1px solid blue; vertical -lign; bottom;} < div c = c>< div id =联系我们>联系我们

/ b>我不想要绝对定位的答案。

解决方案

垂直对齐的努力没有奏效，因为 vertical-align 属性仅适用于内联和表格单元格元素。 （查看规范的详细信息） >

您可以将 #contactus div对齐到包含块的底部（ body ）与 flexbox 。



body {display：flex; / *将元素转换为弹性容器* / flex-direction：column; / *创建子元素的垂直对齐* / justify-content：flex-end; / *在容器的末尾对齐子元素* / border：1px纯红色; height：500px;}＃contactsUs {border：1px solid blue; }

< div id =contactUs>联系我们

about flexbox visit：

• 对齐Flex项目的方法


• 使用CSS灵活框〜MDN


• Flexbox完整指南〜CSS技巧
什么是Flexbox ?! 〜YouTube视频教程

---

请注意，flexbox受所有主流浏览器的支持，除IE 8& 9 。一些最近的浏览器版本，如Safari 8和IE10，需要供应商前缀。要快速添加所需的所有前缀，请在左侧面板中张贴您的CSS： Autoprefixer 。

I'm trying to vertical align a div but it's not working at all for some reason. What am I doing wrong?

body {
border: 1px solid red;
height: 500px;
}
#contactUs {
border: 1px solid blue;
vertical-align: bottom;
}

<div id = "contactUs"> Contact Us </div>

Note: I do not want absolute positioning answers.

解决方案

The vertical alignment effort didn't work because the vertical-align property applies only to inline and table-cell elements. (See the spec for details.)

You can align the #contactus div at the bottom of the containing block (body) with flexbox.

body {

    display: flex;               /* convert element to flex container */
    flex-direction: column;      /* create a vertical alignment for child elements */
    justify-content: flex-end;   /* align child elements at the end of the container */

    border: 1px solid red;
    height: 500px;
}

#contactUs { border: 1px solid blue; }

<div id = "contactUs"> Contact Us </div>

To learn more about flexbox visit:

• Methods for Aligning Flex Items
• Using CSS flexible boxes ~ MDN
• A Complete Guide to Flexbox ~ CSS-Tricks
• What the Flexbox?! ~ YouTube video tutorial

---

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

这篇关于垂直对齐不能在div上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！