时间戳

首页 > 解决方案 > 我无法让我的 flexbox 在 css 中使用“justify-content : center”将内容居中

html - 我无法让我的 flexbox 在 css 中使用“justify-content : center”将内容居中

问题描述

我想将我的网页居中，并将内容放在我的网页上，但对齐内容（在 css 中）似乎不起作用。我尝试在百分比和像素中设置最大宽度，并添加和删除边距。我真的很感激所有的帮助！

我在其他元素中有多个 div 元素，包括一个我想居中的菜单，甚至是菜单内的文本。然后我有一个由于分辨率差而具有固定大小的标题。我设法居中的唯一方法是将边距设置为自动，但我相信这会覆盖 flexbox 系统？我还尝试创建一个新的 div 来封装所有内容（Innpakning1），但这只给了我两个 div 并没有达到我的预期。 

 <div class="innpakning1">

<div class="innpakning">


<div class="overskrift">
   <img src="media/header.png" id='overskrift' alt="">
</div>

<div class="meny">

  <div class="delmeny"> <a href="beisthjem.php" >Hjem</a> </div>
  <div class="delmeny"> <a href="beistallebeist.php"> Alle beist</a> </div>
  <div class="delmeny"> <a href="beistkategorier.php"> Kategorier </a> </div>

</div>

<div class="informasjon">

       <p> Scamander har som sitt oppdrag i livet å finne og katogerisere beist. Han ønsker å vise verden at de er mer fantastiske enn farlige,
 og har derfor laget denne siden som drives av en nonprofit organisasjon av samme navn som grunnleggeren. Her kan du kartelgge hvilke dyr som finens,
 og gitt at du er en sertifisert beistfinner, legge til dine egne funn.
 Vi gleder oss til å samarbeide med deg.
     </p>


     </div>

</div>

</div>

这是我的CSS。

body{
 display: flex;
 background-color: blue;
 width: 100%;
}
.innpakning1{
display: flex;
justify-content: center;
max-width: 800px;
margin-left: 15px;
}

.innpakning{

display: flex;
margin-left: 15px;
flex-direction: column;
background-color: red;
max-width: 400px;
justify-content: center;

}


.meny{
display: flex;
background-color: violet;
max-width: 200px;
justify-content: center;
margin-left: 15px;
}

.delmeny{
max-width: 200px;
 display: flex;
 margin-left: 15px;
}

#overskrift{
margin: auto;
   display: flex;
 height: 78px;
 width: 317px;
margin-left: 15px;
}

.informasjon{
background-color: aliceblue;
 display: flex;
 max-width: 200px;
 flex-direction: column;
 justify-content: center;
margin-left: 15px;

}

标签： htmlcssflexbox

解决方案

在flex-direction: column你应该设置align-items: center一切都是中心化，添加justify-content: center到body和align-items: center类的div.innpakning

推荐阅读