简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

文本如何做到垂直居中对齐_html/css_WEB-ITnose

WBOY
풀어 주다： 2016-06-24 11:31:22
원래의
1552명이 탐색했습니다.

文本如何做到垂直居中对齐:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
网页布局中经常用到让文本在一行中垂直居中对齐。默认情况下文本是居上对齐的。
实例:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.mytest {  width: 200px;  height: 40px;  line-height: 40px;  border: 1px solid blue;}</style></head><body><div class="mytest">大家好，我要居中对齐</div></body></html>
로그인 후 복사

以上代码可以将div中的文本垂直居中对齐，对齐的方法就是把div的height属性值和line-height的属性值设为相等即可达到文本垂直居中效果，上面代码中两个属性值都设置为40px。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4762

更多内容可以参阅:http://www.softwhy.com/divcss/

관련 라벨：
文本如何做到垂直居中对齐
원천：php.cn
이전 기사：兼容所有浏览器的圆角矩形效果代码实例_html/css_WEB-ITnose 다음 기사：CSS实现的鼠标滑过改变链接文字实例代码_html/css_WEB-ITnose
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
HTML/CSS에 배경 비디오를 삽입하는 방법은 무엇입니까? 안녕하세요 여러분, 최근에 문제가 발생했습니다. 내 웹사이트에 비디오 배경을 설정하려고 하는데 중앙에 있는 텍스트가 맨 아래까지 계속 실행됩니다. 이유는 모르겠지...
에서 2023-11-06 13:59:13
0
1
240
스위치 옆에 텍스트를 세로로 가운데에 맞추는 방법은 무엇입니까? "switch"를 사용하여 "toggle-label" 클래스 중앙에 수직으로 텍스트를 만들고 싶지만 실패한 코드는 제가 사용한...
에서 2023-09-15 11:58:54
0
1
206
div에서 버튼 요소를 수직으로 정렬할 때 CSS 여백으로 정의된 것보다 요소의 수직 공간이 더 많은 이유는 무엇입니까? 이 사이트에 진행 중인 작업 페이지가 있는데 이 페이지에서 가장 어려운 부분이 결과 필터링을 위한 스크립트와 스타일일 것이라고 생각했지만 실제로 필터링 부분은 예...
에서 2023-09-14 18:49:41
0
2
252
Tailwind CSS를 사용하여 그리드에서 항목의 마지막 행을 중앙에 배치하는 방법은 무엇입니까? Tailwind(React 사용)를 사용하여 최종 프로젝트를 그리드 레이아웃에 맞추는 데 문제가 있습니다. 기본적으로 나는 3개의 항목을 원하고 3개의 항목이 남...
에서 2023-08-28 20:06:09
0
1
195
디렉토리에 PHP 쓰기 권한을 부여하는 방법은 무엇입니까? PHP를 사용하여 파일을 만들려고 하는데 작동하지 않습니다. 나는 이것이 쓰기 액세스 권한이 없기 때문이라고 가정합니다(이전에도 이 문제가 있었습니다). 폴더를 ...
에서 2023-08-27 15:25:11
0
2
310
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！