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

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


루비 대상 지식 요약
루비 변수 깊이 분석

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage