html - 使用 flex box,但我的元素内容仍然没有居中

标签 html css flexbox center

我的页面标题部分有两个元素

<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>

Updated JSFiddle

关于html - 使用 flex box,但我的元素内容仍然没有居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49742067/

相关文章:

javascript - 当用户点击输入时如何聚焦输入?

javascript - 从表单结果调用 javascript 函数

php - 本地主机中的 XAMPP 延迟

css - 仅使用 Flexbox CSS 像网格一样对齐 Flex 元素

html - 无法在我的网页中放置背景图片

html - 仅当数据库中存在图像时如何设置div的动态背景图像

javascript - 航点js点击到下一个div

html - 如何移动文本框下的标签?

html - CSS3 : Flex display and overflow

css - 如何在 flexbox 容器具有指定高度时滚动嵌套的 flexbox 子项