html - flexbox 对齐元素困惑

标签 html css flexbox

我想得到与我的素描相似的效果。

https://postimg.org/image/o03qu4tpp/

人总是应该放在标题的右下角。旋转木马应该位于中间/中间偏左的位置(标题高度的 50%)。

我将新类 (pad4) 添加到我的标题容器中,并使用了 flexbox。

display: flex;

调整内容:flex-end; 对齐元素:flex-end;

现在,一个人在左下角,文字在右上角。我现在不知道怎么修。因为当我使用边距或填充时,没有任何反应。

网站:http://jarmor.webd.pl/designs/kovta/agency2a.html

最佳答案

display: flex必须应用于父元素,以便子元素被视为 flex 元素。因此,您应该申请display: flex; align-items: flex-end;给你的<header>元素。然后,申请align-self: center到 slider 容器(在您的情况下为 div.container-fluid.pad4)。结果如下:The result

关于html - flexbox 对齐元素困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40450165/

相关文章:

html - Chrome 打印正在切断多列 css 的 tr 元素之间的文本

javascript - Bootstrap 导航栏固定顶部和 body 填充顶部

html - 我怎样才能让 font-awesome 可以占据其父容器的整个区域

html - 子域忽略链接样式表的边距?

javascript - 阅读更多脚本和并排 div 无法正常协同工作

html - 遇到 flexbox 属性问题

css - 与输入分离的reactjs autosuggest建议列表

javascript - 每次加载ajax或一次加载所有内容

html - 当 flexbox 元素以列模式包装时,容器不会增加其宽度

html - 为什么 flex 元素不缩小过去的内容大小?