Notice
Recent Posts
Recent Comments
Link
160x600
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 머신러닝
- keras
- 훈련
- 크롤링(crawling)
- MariaDB
- pythone
- tensorflow
- python
- 데이터 분석
- 시각화
- 데이터
- DB
- 예측
- 딥러닝
- 해석
- Deep Learning
- Database
- 데이터전처리
- 정확도
- pandas
- Oracle
- sql
- 데이터베이스
- HeidiSQL
- python기초
- SQL예제
- 회귀모델
- sklearn
- 데이터 수집
- 데이터 가공
Archives
- Today
- Total
코딩헤딩
html 중앙정렬 본문
728x90
<body>
<div class="back">
<h1 class="text"> HTML </h1>
<button type="submit" id="btnSubmit"> 버튼 </button>
</div>
</body>
<style>
body{
background-color: green;
}
.back {
background-color: red;
}
</style>
1. 빨간 부분인 div를 html 의 중앙으로 옮겨준다.
<body>
<div class="back">
<h1 class="text"> HTML </h1>
<button type="submit" id="btnSubmit"> 버튼 </button>
</div>
</body>
<style>
body{
background-color: green;
}
.back {
background-color: red;
}
.back{
width: 500px;
margin: auto;
}
</style>
2. h1 테그 안의 HTML 글자를 중앙으로 정렬
<body>
<div class="back">
<h1 id="text"> HTML </h1>
<button type="submit" id="btnSubmit"> 버튼 </button>
</div>
</body>
<style>
body{
background-color: green;
}
.back {
background-color: red;
}
.back{
width: 500px;
margin: auto;
}
#text{
width: fit-content;
margin: auto;
}
</style>
3. 버튼을 div태그의 중앙으로 정렬
<body>
<div class="back">
<h1 id="text"> HTML </h1>
<button type="submit" id="btn"> 버튼 </button>
</div>
</body>
<style>
body{
background-color: green;
}
.back {
background-color: red;
}
.back{
width: 500px;
margin: auto;
}
#text{
width: fit-content;
margin: auto;
}
#btn{
width: 200px;
margin: auto;
display: block;
}
</style>
주의할 점
태그 선택자 사용시 매칭시켜줄것
중앙정렬하고싶은 대상의 넓이 지정후 margin을 auto로
버튼을 중앙정렬시 display는 block으로!!!
728x90
'HTML | CSS' 카테고리의 다른 글
[CSS]부드럽게 깜빡이는 그림자 (0) | 2024.01.19 |
---|---|
[CSS] background-color 반투명 및 그라데이션 효과 (0) | 2024.01.19 |
드롭다운 상단 메뉴바 만들기 (0) | 2023.10.03 |