div 내에서 텍스트를 세로 및 가로로 정렬

-2

div 내부의 텍스트를 가로 및 세로로 정렬하는 방법은 무엇입니까? 나는 text-align : center와 함께 수평으로 정렬 할 수있다. 그러나 세로 정렬은 작동하지 않습니다. div 내에서 텍스트를 세로 및 가로로 정렬

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title></title> 
<head> 
    <style> 
     .blocks { 
      width: 200px; 
      height: 100px; 
      border: 1px solid black; 
      text-align: center; 
      vertical-align: center; 
     } 
     #a1 { 
      margin: 0 auto; 
      margin-top: 40px; 
     } 
     #a2 { 
      float: left; 
      margin-left: 25%; 
     } 
     #a3 { 
      float: right; 
      margin-right: 25%; 
     } 
     #a4 { 
      margin: 10% auto 0; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
    <div class="blocks" id="a1">some text</div> 
    <div class="blocks" id="a2">some text</div> 
    <div class="blocks" id="a3">some text</div> 
    <div class="blocks" id="a4">some text</div> 
    </div> 
</body>

감사합니다.

출처

2016-12-28 martinbshp

[** 질문 **] (http://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block)을 확인하십시오. 이 질문은 수 백 번 요구되었습니다. 질문을 게시하기 전에 조사를 해보십시오. –

당신은 CSS 인 flexbox를 사용할 수 있습니다. .blocks 플렉스 컨테이너 & 플렉스 얼라인먼트 속성 적용 align-items & justify-content. 마찬가지로이 도움이

.blocks { 
 
    width: 200px; 
 
    height: 100px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
#a1 { 
 
    margin: 0 auto; 
 
    margin-top: 40px; 
 
} 
 
#a2 { 
 
    float: left; 
 
    margin-left: 25%; 
 
} 
 
#a3 { 
 
    float: right; 
 
    margin-right: 25%; 
 
} 
 
#a4 { 
 
    margin: 10% auto 0; 
 
}

<body> 
 
    <div id="container"> 
 
    <div class="blocks" id="a1">some text</div> 
 
    <div class="blocks" id="a2">some text</div> 
 
    <div class="blocks" id="a3">some text</div> 
 
    <div class="blocks" id="a4">some text</div> 
 
    </div> 
 
</body>

희망 :

.blocks { 
    display: flex; /* Flex Container */ 
    align-items: center; /* Gives Vertical Alignment */ 
    justify-content: center; /* Gives Horizontal Alignment */ 
}

은 (사용 전체 화면 모드) 아래의 코드 조각에서보세요!

출처

2016-12-28 06:54:23

감사 Saurav. 필자는 플렉스 박스 (flexbox)에 대해 메모하고 읽을 것이다. – martinbshp

사용 CSS3의 인 flexbox 개념

세트 부모 표시 : 플렉스
마진 세트 아이 : 자동

잘 작동, 나는 아래의 코드 조각을 추가하고있어 .

<!DOCTYPE html> 
 
<meta charset="utf-8"> 
 
<title></title> 
 
<head> 
 
    <style> 
 
     .blocks { 
 
      width: 200px; 
 
      height: 100px; 
 
      border: 1px solid black; 
 
      text-align: center; 
 
      vertical-align: center; 
 
      display:flex; 
 
     } 
 
     #a1 { 
 
      margin: 0 auto; 
 
      margin-top: 40px; 
 
     } 
 
     #a2 { 
 
      float: left; 
 
      margin-left: 25%; 
 
     } 
 
     #a3 { 
 
      float: right; 
 
      margin-right: 25%; 
 
     } 
 
     #a4 { 
 
      margin: 10% auto 0; 
 
     } 
 
     span{ 
 
     margin:auto;} 
 
    </style> 
 
</head> 
 
<body> 
 
    <div id="container"> 
 
    <div class="blocks" id="a1"><span>some text</span></div> 
 
    <div class="blocks" id="a2"><span>some text</span></div> 
 
    <div class="blocks" id="a3"><span>some text</span></div> 
 
    <div class="blocks" id="a4"><span>some text</span></div> 
 
    </div> 
 
</body>

출처

2016-12-28 06:53:55

div 내에서 텍스트를 세로 및 가로로 정렬

답변

관련 문제