垂直对齐不能在div上工作

垂直对齐不能在div上工作

关注
发信
关注(28)粉丝(399)

垂直对齐不能在div上工作

本文介绍了垂直对齐不能在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 ）与。

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：





  • 〜MDN

  • 〜CSS技巧
    • 〜YouTube视频教程




请注意，flexbox受所有主流浏览器的支持，。一些最近的浏览器版本，如Safari 8和IE10，需要。


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:

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上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-14 04:16
Powered by LMLPHP ©2024 垂直对齐不能在div上工作 0.034565