Html 在flexbox页面布局中将文本居中于图像上方时出现问题_Html_Css_Flexbox

Html 在flexbox页面布局中将文本居中于图像上方时出现问题

html css

Html 在flexbox页面布局中将文本居中于图像上方时出现问题,html,css,flexbox,Html,Css,Flexbox,我已经厌倦了这里的一些不同的解决方案，但我不能得到任何工作。所以我想知道是否有人有其他想法我用flexbox创建了一个网页，用它来布置所有的东西，这样它就很好，响应速度也很快然而，我被卡住了，在我的一个flexbox容器中，我希望有一个以文本为中心的图像在顶部居中此容器是带有“灯泡”img和文本的“容器堆栈粉红色”容器这是我的网页的一部分。我已经添加了占位符图像，并且没有在中复制任何Javascript，因为它并没有真正导入布局提前感谢您的帮助/建议 <html>

我已经厌倦了这里的一些不同的解决方案，但我不能得到任何工作。所以我想知道是否有人有其他想法

我用flexbox创建了一个网页，用它来布置所有的东西，这样它就很好，响应速度也很快

然而，我被卡住了，在我的一个flexbox容器中，我希望有一个以文本为中心的图像在顶部居中

此容器是带有“灯泡”img和文本的“容器堆栈粉红色”容器

这是我的网页的一部分。我已经添加了占位符图像，并且没有在中复制任何Javascript，因为它并没有真正导入布局

提前感谢您的帮助/建议

<html>
    <head>
        <link rel="stylesheet" href="https://use.typekit.net/nqr5bmw.css">
    </head>
    <body>
    <div class="container green">
        <div class="right-side">
            <img id="raw-logo" src="http://via.placeholder.com/300x100" alt="raw-logo">
        </div>
        <div class="centered mash">
            <img id="mash-logo" src="http://via.placeholder.com/700x500" alt="mash-up-img">        
        </div>
    </div>  
    <div class="container pink">
            <div class="centered fancy-header">
            <p id="fancy-text1">Bacon ipsum<br>dolor amet</p>
            </div>
            <div class="centered fancy-body">
                <p id="fancy-text2">Bacon ipsum dolor amet tail pancetta ribeye<br>beef turkey ball tip.</p>        
            </div>
            <div class="centered scroll">
                    <p id="fancy-text3">keep scrolling</p>
                    button here
            </div>
    </div>  
    <div class="container-row blue">
            <img id="masher" src="http://via.placeholder.com/700x500" alt="masher-img">
            <div id="brief-text">
                <p><span id="header">bacon</span><br><span id="subheader">in short...</span></p>
                <p class="body">tasty</p>
                <p class="body">Bacon ipsum Bacon ipsum Bacon ipsum<br>Bacon ipsum Bacon ipsum Bacon ipsum Bacon ipsum<br>amet tail pancetta ribeye</p>
            </div>
        </div> 
    <div class="container-stack pink">
        <div id="wrapper">
            <img id="bulb" src="http://via.placeholder.com/500x300" alt="bulb-img">
            <div id="bulb-text">
                    <p>Bacon ipsum dolor amet<br>tail pancetta ribeye beef<br>turkey ball tip.</p>
                    <p>Andouille prosciutto<br>ground round jowl jerky.</p>   
            </div>
        </div>

    </div>  
    <div class="container generator">
            <div class="centered text">
                <div class="word-1">Peanut Butter</div>
                <div class="word-2">Water Lily Seeds</div>
            </div>
            <div class="centered">
                <button class="button">Mash!</button>        
            </div>

    </div> 
  </body>
</html>

也许有几种方法可以做到这一点。如果你的图像足够大，你不想把它作为背景，你可以这样做

#bulb-text{
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
transform: translateX(-50%) translateY(-50%);
}

你为什么不直接使用背景图像呢

正文{
字体系列：fontfabric的bebas neue；
字号：700；
文本对齐：居中；
文本转换：大写；
背景色：黑色；
宽度：100%；
身高：100%；
保证金：0；
}
蓝先生{
背景色：天蓝色；
}
.粉红{
背景颜色：粉红色；
}
格林先生{
背景色：黄绿色；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
调整项目：灵活启动；
宽度：100%；
保证金：0；
填充：0；
}
.货柜区{
显示器：flex；
弯曲方向：行；
证明内容：中心；
宽度：100%；
保证金：0；
填充：0；
}
.货柜堆{
显示器：flex；
证明内容：中心；
宽度：100%；
保证金：0；
填充：0；
}
.居中{
弹性：0.100%；
自对准：居中；
}
.右侧{
边框：1px纯蓝色；
弹性：0.100%；
自对准：柔性端；
}
.左侧{
边框：1px实心橙色；
弹性：0.100%；
自我校准：灵活启动；
}
#原始标志{
宽度：13.3vw；
最大宽度：150px；
}
#mash标志{
宽度：80%；
左边距：10%；
保证金权利：10%；
}
.花式头球{
边框：1px纯蓝色；
字体大小：15vw；
}
.花式身材{
边框：1px纯红；
字体大小：3vw；
}
#花式文本1{
保证金：0；
}
#花式文本2{
利润率最高：7vw；
}
#捣碎机{
宽度：40%；
左边距：10%；
}
#简短文本{
左缘：5%；
保证金权利：10%；
自对准：居中；
}
#标题{
字体大小：11vw；
}
#副标题{
字体大小：5vw；
}
.身体{
字体大小：2.5vw；
}
#包装纸{
位置：相对位置；
}
#球茎{
宽度：40%；
}
.集装箱堆垛#包装{
背景图像：url（“http://via.placeholder.com/500x300");
背景尺寸：封面；
背景位置：中心；
填充物：3vw；
}


培根益生菌
牛肉火鸡球头
保持滚动
按钮在这里
简而言之
美味
培根益生菌培根益生菌培根益生菌培根益生菌培根益生菌培根益生菌培根益生菌培根益生菌培根益生菌
培根伊普苏姆多洛阿梅特
尾潘切塔里贝耶牛肉
火鸡球头
安都尔火腿
磨圆下巴干。
花生酱
睡莲种子
捣碎

.container{
位置：相对位置；
文本对齐：居中；
颜色：黑色；
}
.居中{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
培根伊普苏姆多洛阿梅特
尾潘切塔里贝耶牛肉
火鸡球头
安都尔火腿
磨圆下巴干

…我想要一个以[sic]图像为中心的[sic]，上面以文本为中心的[sic]

以下更改应将文本移到图像上方并使其居中

#wrapper {
    ...
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

正文{
字体系列：fontfabric的bebas neue；
字号：700；
文本对齐：居中；
文本转换：大写；
背景色：黑色；
宽度：100%；
身高：100%；
保证金：0；
}
蓝先生{
背景色：天蓝色；
}
.粉红{
背景颜色：粉红色；
}
格林先生{
背景色：黄绿色；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
调整项目：灵活启动；
宽度：100%；
保证金：0；
填充：0；
}
.货柜区{
显示器：flex；
弯曲方向：行；
证明内容：中心；
宽度：100%；
保证金：0；
填充：0；
}
.货柜堆{
显示器：flex；
证明内容：中心；
宽度：100%；
保证金：0；
填充：0；
}
.居中{
弹性：0.100%；
自对准：居中；
}
.右侧{
边框：1px纯蓝色；
弹性：0.100%；
自对准：柔性端；
}
.左侧{
边框：1px实心橙色；
弹性：0.100%；
自我校准：灵活启动；
}
#原始标志{
宽度：13.3vw；
最大宽度：150px；
}
#mash标志{
宽度：80%；
左边距：10%；
保证金权利：10%；
}
.花式头球{
边框：1px纯蓝色；
字体大小：15vw；
}
.花式身材{
边框：1px纯红；
字体大小：3vw；
}
#花式文本1{
保证金：0；
}
#花式文本2{
差额
     .container {
      position: relative;
      text-align: center;
      color: black;
    }

     .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

   <div class="container">
                          <img src="http://via.placeholder.com/500x300" alt="Snow" style="width:100%;">
                          <div class="centered">
                            <p>Bacon ipsum dolor amet<br>tail pancetta ribeye beef<br>turkey ball tip.</p>
                            <p>Andouille prosciutto<br>ground round jowl jerky.</p>
                          </div>
                        </div>

#wrapper {
    ...
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}