Не уверен, почему содержимое моего элемента flexbox не расположено в центре - PullRequest
Новая
       12

Не уверен, почему содержимое моего элемента flexbox не расположено в центре

0 голосов
/ 22 февраля 2019

Я часами просматривал учебники по Flexbox на YouTube и не могу понять, почему я не могу центрировать содержимое элемента Flexbox.

Мне удалось отцентрировать изображения по горизонтали с помощью text-align: center;в моем гибком контейнере.

Однако это не влияет на список, И он не центрировал его по вертикали, другие люди, кажется, используют justify-contents или align-items, но на самом деле это не работает для меня.

Вот код: https://jsfiddle.net/dL72j5gx/1/

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;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

Заранее спасибо!

РЕДАКТИРОВАТЬ: Вот быстрое изображение дляпокажи, что я собираюсь. homepagelayout

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Применить 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>
0 голосов
/ 22 февраля 2019

Когда вы используете flexbox, вам обычно нужно применять свойства к нескольким различным «контейнерам».Вам необходимо добавить следующие 3 свойства для прямого родителя элементов: 

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

В этом случае добавьте эти 3 свойства в класс .MenuLogo и класс .ContentArea.

Вы можете переместить стол обратно под изображение, поместив его в div, который отделен от div class="MenuLogo" 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...