>source

YouTube에서 flexbox 자습서를 검토하는 데 몇 시간을 보냈는데 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>

미리 감사합니다!

수정 : 여기에 무슨 일이 일어나고 있는지 보여주는 빠른 이미지가 있습니다.

  • 답변 # 1

    요소의 부모에게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>
    
    

  • 답변 # 2

    flexbox를 사용할 때는 일반적으로 여러 "컨테이너"에 속성을 적용해야합니다. 요소의 직접 상위에 다음 3 가지 속성을 추가해야합니다.

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

    이 경우,이 3 가지 속성을 .MenuLogo 에 추가하십시오  수업과 .ContentArea  수업.

    테이블을 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>
    
    

관련 자료

  • 이전 user interface - 루프가 끝날 때만 다트 컴포넌트 진행률 표시 줄 업데이트
  • 다음 한 테이블의 열에서 다른 테이블의 열로 여러 번 SQL Server 데이터 복제