- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的页面标题部分有两个元素
<header>
<div id="banner">
<img width="200" src="/assets/my-club-c45b98884adb8f6c1c8afade4fc83d722cc151ce7dc7a88083bdf2b9f343c7ef.png" alt="My Club" />
<span id="pageTitle">My Centered Title</span>
</div>
</header>
我只希望第二个元素中的内容 -- 跨度垂直和水平居中。按照这里的建议 -- Flexbox: center horizontally and vertically ,我尝试了 flex box 方法并应用了这些样式
#banner {
background-color: #003162;
text-align: left;
}
#banner img {
display: inline-block;
}
#pageTitle {
color: #ffffff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
但我的内容并未集中在该特定元素上 -- https://jsfiddle.net/6fr3p6mj/1/我该如何纠正这个问题?
最佳答案
您需要在#banner
上设置display: flex;
。并为 #pageTitle
指定 align-self: center;
和 flex-grow: 1;
。
#banner {
background-color: #003162;
display: flex;
}
#pageTitle {
color: #ffffff;
text-align: center;
align-self: center;
flex-grow: 1;
}
<header>
<div id="banner">
<img width="200" src="data:image/jpeg;base64,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" alt="My Club" />
<span id="pageTitle">My Centered Title</span>
</div>
</header>
关于html - 使用 flex box,但我的元素内容仍然没有居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49742067/
更新 对于那些不喜欢内联 CSS 并想要类的人,这里有另一个带有类和样式表的 jsFiddle。 更新结束 我想做一个产品页面。它将包含三列。第一个是图片,第二个是一些规范,第三个是“入篮”。所有列的
我创建了一个简单的测试应用程序 使用以下代码 var i : int; for (i=0; i *
我做了一个小demo http://html5.by/blogdemo/flexbox/flex-grow-shrink-basis-stackoverflow.html flex 容器中有2个 fl
我读过好几遍,要让 flex-grow 按预期工作,您通常需要设置 flex-grow:1(或 flex: 1) 在元素的父级、其父级等上,一直向上。 在学习 flexbox 时,这给我的印象是它具有
我开始学习 FLEX。我只有 flex sdk。所以我只能使用它开始学习吗?如果是这样,请建议我要通过的链接.. 但是,使用编辑器将最大限度地减少我们的工作,并自行创建代码。所以作为一个新的学习者,理
有没有办法使用 flex-direction: column 在 flex 容器中放置 flex 项有相同的高度,只使用 CSS? JSFiddle:https://jsf
我有一个 flex .swf 和一个单独的 AIR 项目,我试图通过套接字相互通信。 这两个程序连接正常,.swf 能够毫无问题地将数据发送到 AIR 应用程序。但是,我发现当 AIR 应用程序将数据
在这种情况下,我希望将 2.5 放置在 2 下方 - 但 flexbox 容器强制将其放置在同一行,而不是将其放置在 div 下方那已经是那个特定的顺序了。 我如何使用 flexbox - 将包含 2
假设您有一个带有显示 flex、flex-direction 列的 div,在本例中高度为 600。 它有三个子项,每个子项的属性 flex 等于 1。前两个子项呈现一些简单文本,第三个子项呈现 h1
男孩,这个头衔是满口的。让我解释一下我的困惑: 我有一个 flex 容器和 2 个 flex 元素。 /* CSS */ .container {
这个问题在这里已经有了答案: CSS3 Flexbox: display: box vs. flexbox vs. flex (3 个答案) 关闭 1 年前。 今天我们中的许多人都知道 displa
其用例是带有单选按钮的响应式表单。当在大 PC 屏幕上时,所有单选按钮通常都在屏幕上的一行中(就像带有 flex-direction: row 的非包装 flex 容器中的 flex 元素)。在电话上
在可访问的 flex 应用程序中,用户可以使用 TAB 键在控件中导航。 在用户激活特定链接后,flex 应用程序会在 html 页面顶部弹出,并使用 swfobject.embedSWF 加载。 它
我将我的 Flex 3 项目导入 Flex 4 并删除了 Flex 4 问题窗口中列出的所有错误和警告。 启动我的应用程序时,我在 Flex 4 中遇到以下错误。 这可能是什么原因? Error: C
我有如下标记: alot of text 我不能让黄色占据红色的 100% 高度,即使红色溢出,它也只占据窗口的 100%。如果我将红色的 display
我在 Eclispe 3.4 中安装了 flex builder 3 插件。现在许可证过期了。所以我需要在其中添加另一个许可证。但我无法更改许可证 key ,因为该选项已禁用。 因此,请任何人知道如何
这个问题在这里已经有了答案: Make flex items have equal width in a row (3 个答案) How to make Flexbox items the same
我正在尝试理解以下行。 flex :0 1 50% 现在,如果最后一个值,flex basis 是像素,上面会说该元素不允许增长,但允许缩小并且最大为 50 像素。 但是用百分比代替,有什么关系。它将
我一直致力于 flex 布局,遇到了针对 Firefox 和 IE11 的问题。 我创建了一个 codepen显示问题。 截图 Chrome(左)、Firefox(右) 描述 预期的行为是header
我正在尝试在 flex (flash builder 4) 中创建一个简单的表单。我在里面放了一个表单容器和 FormItems。例如,表单项是标准的“客户”字段,例如名字、姓氏、地址、城市、州、 z
我是一名优秀的程序员,十分优秀!