使用弹性框布局后无法居中 div答案

【问题标题】：Can't center a div after using the flex box layout使用弹性框布局后无法居中 div
【发布时间】：2023-12-24 16:02:01
【问题描述】：

我想，我在做一些相当微不足道的事情，完全错了。我在 CSS 和 HTML 方面相当陌生，并尝试在网页顶部使用居中的文本和图像我成功地使用了 3 个盒子的弹性盒子容器布局但我无法让下一个 div 居中在弹性框下方。所有其他行都在弹性盒子容器的第三个盒子下方居中..??

检查我的代码和输出 https://codepen.io/alex1965/pen/eYZLQQG

<!DOCTYPE html>
<html>
<head>
    <title>Hello Jtronicx</title>
<style>
    /*default version*/
    @font-face {
        font-family:"Jtronicxfont";
        src: url("fonts/alien-encounters-regular.ttf");
        font-weight:normal;
              }
    /*bold version*/
    @font-face {
        font-family:"Jtronicxfont";
        src: url("fonts/alien-encounters-bold.ttf");
        font-weight:bold;       
              }
    body {
        background-color: black;
    }
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  writing-mode: horizontal-tb;
  justify-content: center;
  background-color: black;
}

.flex-container > div {
  background-color: black;
  width: 100px;
  height: 100px;
  margin: 10px;
   }
#company{
        color: DarkKhaki;
        text-align: center;
        font-family:"Jtronicxfont";
        font-weight: bold;
        font-size:90px;
        margin-bottom:2px;
        }
a:link, a:visited {
        text-decoration: none;
    background-color: rgb(38, 31, 5);
    color: DarkKhaki;  
    font-family:"Jtronicxfont";
    font-weight:normal;
    font-size: 130%;
    text-align: center;
    display:block;
    width:200px;
    padding: 3px;
    border: 1px solid rgb(117, 104, 50);
    border-radius: 13px;
    margin-bottom:2px;
  }
a:hover {
    background-color: rgb(45, 37, 5);
    color: Khaki;
    cursor:pointer;
    }

div {
    display:block;
    text-align:center;
    color:DarkKhaki;
    font-family:"Arial";
    font-weight: normal;
    font-size:20px;     
}

</style>
</head>
<body>
    <div class="flex-container">
        <div></div>
        <div id="company" style="flex-basis: 600px">Jtronicx bv</div>
        <div><img src="jtronicx.jpg" width="80" height="70"><div>  
    </div>
    <div class="offerings">
        <div>industrial business development</div>
        <div>proof of concepts</div>
        <div>electronics integration</div>
        <div>web design</div>
    <div>   
<ul>
    <li><a href="http://www.jtronicx.com">Company</a></li>
    <li><a href="http://www.jtronicx.com">What I offer</a></li>
    <li><a href="http://www.jtronicx.com">Projects</a></li>
    <Li><a href="http://www.jtronicx.com">Contact</a></Li>
</ul>   
  
</body>
</html>

【问题讨论】：

标签： html flexbox centering box

【解决方案1】：

主要问题是您使用了<div> 标签，而</div> 应该是关闭的。

【讨论】：

嗨弗朗西斯科...好吧，它已经解决了。我一直在寻找我的代码超过 1 小时...... OMG 多么愚蠢！谢谢！！！！