DIV+CSS의 텍스트 내용을 레이아웃_센터 배경 이미지_센터 중앙에 배치합니다.-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

DIV+CSS의 텍스트 내용을 레이아웃_센터 배경 이미지_센터 중앙에 배치합니다.

高洛峰

Dec 12, 2016 pm 02:39 PM

1. 먼저 CSS 속성을 사용하여 전체 레이아웃을 중앙에 맞추는 방법을 소개합니다.
여기서 페이지의 상위 콘텐츠가 무엇인지 설정합니다. 전체 페이지의 콘텐츠가 및

로 구성되어 있다고 가정할 수 있습니다. 그런 다음 더 가까운 상위 항목에 따라 본문의 CSS를 설정합니다. 센터링 문제 text-align:center를 사용하여 콘텐츠를 센터링할 수 있습니다. 특정 CSS 센터링 코드는 다음과 같습니다.
body{text-aligh:center; 그러나 이 경우에도 레이아웃 너비를 설정하지 않았기 때문에 문제가 발생합니다. ”, 콘텐츠 레이아웃의 가장 바깥쪽 CSS 컨트롤에 float: 속성을 설정하면 레이아웃이 설정한 float: 방향으로 기울어집니다. 해결책은 본문의 중앙 CSS 속성을 설정하는 것입니다. 레이아웃 객체가 중앙으로 설정되어 너비를 정의할 수 있습니다. 웹 페이지의 너비가 700px이고 가장 바깥쪽 CSS 스타일이 class="weicheng"인 경우 설정은 ".weicheng{margin:0 auto"와 같아야 합니다. ; width:700px;} " 그게 다입니다. 이 요소는 IE에서 유용합니다. 테스트 후 Firefox와 같은 브라우저에서는 text-aligh:center만 설정하고 상위(본문) 외에는 레이아웃을 중앙에 배치할 수 없습니다. " "margin:0 auto; "이것은 무엇을 의미합니까? 콘텐츠의 위쪽과 아래쪽은 거리가 0이고 왼쪽과 오른쪽은 자동으로 "자동"이므로 웹페이지를 설정할 수 있다는 뜻입니다. 레이아웃을 중앙에 배치합니다(여기에서는 여백:5px 자동을 설정합니다. 동일한 효과는 실험에 영향을 미치지 않습니다). 전체 예제는 다음과 같습니다(효과를 보려면 코드를 복사하여 새 HTML 파일을 생성할 수 있음):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>www.divcss5.com的CSS div的布局居中实例</title>  
<style type="text/css">  
<!--  
body{ text-align:center; }  
.waicheng {color: #0066CC; margin:5px auto; width:700px;
 height:200px; border:1px solid #000000;}  
-->  
</style>  
</head>  
<body>  
<div class="waicheng">我是css中的居中的实验;我的布局外层有一个边为1px黑色边，
我宽700px，高为200px,设置了与顶部内容距离为5PX</div>  
</body>  
</html>

CSS 레이아웃 중심 예제 보기

2. 웹페이지 배경을 중앙에 맞추려면:
여기서 중앙 정렬에는 왼쪽 및 오른쪽 중앙 정렬과 위쪽 및 아래쪽 중앙 정렬이 포함됩니다.
body{BACKGROUND: #FFF url(http://www.divcss5) .com/img/css-logo.gif) no-repeat center; } //이 구절의 의미는 css-logo.gif 이미지의 배경을 반복되지 않음(no-repeat)으로 설정하는 것입니다. 센터링(중앙). 센터링은 왼쪽과 오른쪽이며 수직 설정은 설정할 필요가 없으며 자동으로 센터링됩니다.

3. CSS에서 소개 텍스트와 이미지 내용을 왼쪽, 오른쪽, 위쪽, 아래쪽 중앙에 배치하는 방법에 대한 튜토리얼:
왼쪽과 오른쪽을 중앙에 배치하고 텍스트만 사용하는 것이 쉽다는 것을 알고 있습니다. align:center; 텍스트와 이미지 내용을 중앙에 배치하지만 수직으로 이미지를 120px 높이에 수직으로 정렬하는 경우 이미지 중앙 정렬은 수직 정렬:css 속성이고 텍스트 중앙 정렬에는 줄 높이 설정이 필요합니다. 여기서는 높이를 120px로 설정하고 Line-height: 120px로 설정해야 합니다. 이 방법으로 CSS 속성 스타일을 통해 텍스트와 이미지를 위, 아래, 왼쪽, 오른쪽에 배치할 수 있습니다.

전체 홈페이지를 중앙에 배치하는 코드는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>www.divcss5.com的CSS div的完整居中实例</title> 
<style type="text/css"> 
<!-- 
body{ text-align:center; margin:0 auto;
 background:url(http://www.divcss5.com/img/css-logo.gif) no-repeat center;} 
.waicheng {color: #0066CC; margin:5px auto;
 width:700px; height:120px; line-height:120px; border:1px solid #000000; } 
.waicheng img {vertical-align:middle;} 
--> 
</style> 
</head> 
<body> 
<div class="waicheng">我是css中的居中的完整居中实例;
我的布局外层有一个边为1px
 <img src="/static/imghwm/default1.png"  data-src="http://www.divcss5.com/img/css-logo.gif"  class="lazy"   alt="图片内容居中" /></div> 
</body> 
</html>

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.