728x90
이미지와 텍스트를 가운데 배치하는 방법으로
CSS문서나 style태그 안에
text-align: center; 를 쓰면 됩니다.
<!DOCTYPE html> <html> <head> <style> #photo{ text-align: center; } img{ border: 1px solid black; } h1{text-align: center;} </style> </head> <body> <div id="photo"> <img src="https://tistory1.daumcdn.net/tistory/5099074/attach/19a07a64644447e8be12e25ce96a20d5" alt="blog_profile_photo"> </div> <h1>blog profile</h1> </body> </html>단 이미지는 div안에 넣은 다음,
div에 text-align: center;를 써야 합니다.
이미지에 text-align: center;를 적용시키면 가운데에 배치가 되지 않습니다.
img: {text-align: center;} (x)
위에 사진이 코드의 결과로
이미지와 글자가 가운데 정렬이 됐습니다.
여러분도 코딩 공부 파이팅!
728x90
반응형
'Front-end > css' 카테고리의 다른 글
| CSS 공부 정리 [Sessac 바닐라 Javascript + Vue.js 과정] (0) | 2022.02.12 |
|---|---|
| 이미지를 동그란 원으로 만드는 방법 [CSS] (0) | 2021.12.18 |