不确定为什么我的Flexbox项目内容未位于中心

时间：2019-02-22 03:21:05

标签： html css flexbox

我已经花了数小时来查看youtube上的flexbox教程，却无法弄清为什么我无法将flexbox项目内容居中。

通过在我的flex容器中使用 private static int[] VALUES = {1,2,3,4,5,6} ，我设法使图像水平居中。

但是，这不会影响列表并且它没有垂直居中，其他人似乎在使用text-align: center;或justify-contents，但对我来说并不是很有效。

代码如下：https://jsfiddle.net/dL72j5gx/1/ 

align-items
html,
body {
  height: 100%;
  padding: 0px;
  width: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0px;
}

.flex-container {
  height: 100%;
  width: 100%;
  display: flex;
  border: 5px solid red;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.menu {
  width: 50%;
  border: 3px solid green;
  align-self: center;
  height: 100%;
}

.content {
  width: 50%;
  border: 3px solid blue;
  align-self: center;
  height: 100%;
}

.MenuLogo {
  height: 100%;
  border: 3px solid yellow;
}

.ContentArea {
  height: 100%;
  border: 3px solid purple;
}

.quLogo {
  width: 300px;
  height: 100px;
}

.quCharacter {
  width: 300px;
  height: 300px;
}

.myList {
  padding: 10px;
  width: 30%;
}

.list-group {}

.list-group-item {
  outline: 3px solid black;
}

.list-group-item>a {
  color: black;
}

谢谢！

编辑：这是一张快速的图片，显示我要做什么。 homepagelayout

2 个答案:

答案 0 :(得分：2)

将 flex 应用于元素的父级，并将flex-direction:column赋予 MenuLogo 

html, body {
    height: 100%;
    padding: 0px;
    width: 100%;
    overflow: hidden;
}
body {
    margin: 0;
    padding: 0px;
  }

.flex-container  {
    height: 100%;
    width: 100%;
    display: flex;
    border: 5px solid red;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.menu {
    width: 50%;
    border: 3px solid green;
    align-self: center;
    height: 100%;
}


.content {
    width: 50%;
    border: 3px solid blue;
    align-self: center;
    height: 100%;
}

.MenuLogo{
    height: 100%;
    border: 3px solid yellow;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.ContentArea{
    height: 100%;
    border: 3px solid purple;
    justify-content: center;
    align-items: center;
    display: flex;
}

.quLogo {
  width: 300px;
  height: 100px;
}

.quCharacter {
  width: 300px;
  height: 300px;
}


.myList {
    padding: 10px;
    width: 30%;
}

.list-group{

}

.list-group-item {
    outline: 3px solid black;
}

.list-group-item > a{
    color: black;
}
<!doctype html>
<html lang="en">
<html>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
		<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial scale = 1">
			<title>My Webpage</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles/main.css">
		</head>
		<body>

<div class="flex-container">
    <div class="menu"> 
    	<div class="MenuLogo">
        	<img class="quLogo" src="https://via.placeholder.com/300x100" alt="LOGO">
        	<div class="myList">
		<ul class="list-group">
  			<li class="list-group-item"><a href="#">Shop</a></li>
  			<li class="list-group-item"><a href="#">Gallery</a></li>
  			<li class="list-group-item"><a href="#">About</a></li>
  			<li class="list-group-item"><a href="#">Contact</a></li>
  		</ul>
  			</div>

		</div>
	</div>	

    <div class="content"> 
    	<div class="ContentArea">
        <img class="quCharacter" src="https://via.placeholder.com/300" alt="CHARACTER">
        </div>
    </div>
</div>
</div>

</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		</body>
</html>

答案 1 :(得分：1)

使用flexbox时，通常需要将属性应用于多个不同的“容器”。您需要将以下3个属性添加到元素的直接父级：

display: flex;
justify-content: center;
align-items: center;

在这种情况下，请将这3个属性添加到.MenuLogo类和.ContentArea类中。

您可以通过将表格放到与div class="MenuLogo" div分开的div中，将表格移回图像下方。此div现在充当这两个项目的容器，您希望它们是单独的元素。

html,
    body {
      height: 100%;
      padding: 0px;
      width: 100%;
      overflow: hidden;
    }

    body {
      margin: 0;
      padding: 0px;
    }

    .flex-container {
      height: 100%;
      width: 100%;
      display: flex;
      border: 5px solid red;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .menu {
      width: 50%;
      border: 3px solid green;
      align-self: center;
      height: 100%;
    }

    .content {
      width: 50%;
      border: 3px solid blue;
      align-self: center;
      height: 100%;
    }

    .MenuLogo {
      height: 100%;
      border: 3px solid yellow;
      display: flex;
    justify-content: center;
    align-items: center;
    }

    .ContentArea {
      height: 100%;
      border: 3px solid purple;
      display: flex;
    justify-content: center;
    align-items: center;
    }

    .quLogo {
      width: 300px;
      height: 100px;
    }

    .quCharacter {
      width: 300px;
      height: 300px;
    }

    .myList {
      padding: 10px;
      width: 30%;
    }

    .list-group {
    }

    .list-group-item {
      outline: 3px solid black;
    }

    .list-group-item>a {
      color: black;
    }
<!doctype html>
	<html lang="en">
	<html>
	<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
	        <head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width = device-width, initial scale = 1">
	            <title>My Webpage</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="./style.css">
	        </head>
	        <body>

	<div class="flex-container">
	    <div class="menu"> 
	        <div class="MenuLogo">
	            <img class="quLogo" src="https://via.placeholder.com/300x100" alt="LOGO">
	            <div class="myList">
	        <ul class="list-group">
	            <li class="list-group-item"><a href="#">Shop</a></li>
	            <li class="list-group-item"><a href="#">Gallery</a></li>
	            <li class="list-group-item"><a href="#">About</a></li>
	            <li class="list-group-item"><a href="#">Contact</a></li>
	        </ul>
	            </div>

	        </div>
	    </div>  

	    <div class="content"> 
	        <div class="ContentArea">
	        <img class="quCharacter" src="https://via.placeholder.com/300" alt="CHARACTER">
	        </div>
	    </div>
	</div>
	</div>

	</div>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	        </body>
	</html>

相关问题
最新问题