[CSS] 요소 가운데[메모]

3042 단어 CSS
중앙에 부쳐야 할 때, 매번 조사하고 있기 때문에 비망록은

블록 요소


sample.css
/* 色、幅、高さの記述は省略 */
.contentA{
  /* 親要素 */
  display: flex;
  align-items: center;
}

.contentB{
  /* 子要素 */
  margin: 0 auto;
}
sample.html
<body>
  <div class="contentA">
    <div class="contentB"></div>
  </div>
</body>

결과 (빨간색은 부모 요소, 파란색은 하위 요소)



내연 원소


내장 요소를 div로 묶다
sample.css
/* 色、幅、高さの記述は省略 */
.contentA{
  /* 親要素 */
  display: flex;
  align-items: center;
}

.contentB{
  /* 子要素 */
  margin: 0 auto;
}

/* ボタンの位置設定は特になし */

sample.html
<body>
  <div class="contentA">
    <div class="contentB">
      <input type="button" value="テストボタン">
    </div>
  </div>
</body>

실행 결과(빨간색은 부모 요소, 파란색은 하위 요소(버튼)


좋은 웹페이지 즐겨찾기