객체의 텍스트가 객체의 수직 중앙에 오도록 CSS에서 텍스트를 설정하는 방법도 많은 친구들을 괴롭히는 문제입니다. 오늘날 인터넷의 많은 코드는 브라우저와 호환되지 않습니다. 인터넷에서 관련 방법을 정리하고 일부 변경을 했습니다. 모든 주류 브라우저와 완벽하게 호환됩니다.
다양한 상황에서의 수직 센터링 방법에 대해 이야기해 보겠습니다.
1. 한 줄의 텍스트가 세로 중앙에 위치합니다
다음 코드를 보세요:
< head>
스크립트 홈-css 수직 센터</title> ; <br/><script type="text/javascript" 언어="javascript"> <br>function sel(id) {switch(id) {case "1":document.getElementById("sub").style . lineHeight = "normal";break;case "2":document.getElementById("sub").style.lineHeight = "20px";break;case "3":document.getElementById("sub").style.lineHeight = "28px";break;}} <br></script> <br><style type="text/css"> <br>#all { <br> 너비: 240px; 10px ; 글꼴 크기:12px; <br> 배경색:#CCC; <br>#sub { <br> 너비: 230px; : 0 5px; <br> 높이:20px; <br> 배경색:#F90; <br>#sel { <br> 여백:5px; } <br>선택 { <br> 너비:260px; <br></style> <br><br><body> = "all"> <br><p id="sub">텍스트 줄은 세로 중앙에 위치하며 이 개체의 높이는 20px입니다. <br></p> <p id="sel "><select onchange="sel(this.value)"><option value="1">기본값, 행 높이를 다음으로 설정합니다: 일반</option>< ;option value="2"> ;선 높이를 개체 높이와 동일하게 설정: 20px</option><option value="3">선 높이를 개체 높이보다 크게 설정 : 28px</option></select></p> <br></body> <br></html><br><br><br><br>방법: 줄 높이: 20px. 동일한 행 높이와 개체 높이를 설정합니다. <br><br>참고: 이 설정은 간단하고 다양한 브라우저와 호환되며 인라인 개체를 지원합니다. 하지만 높이가 고정된 객체라면 한 줄만 표시할 수 있습니다. 두 줄의 텍스트가 있는 경우 "overflow:hidden"을 설정하지 않으면 개체가 늘어납니다. <br><br>2. 여러 줄의 텍스트 및 적응력이 뛰어남 <br> <br>아래 코드를 참조하세요. <br><br>메서드: padding-top:10px; 동일한 상단 및 하단 패딩을 설정합니다. <br></p>설명: 다양한 브라우저와 호환되며 인라인 개체를 지원하고 img와 같은 텍스트가 아닌 개체도 지원합니다. 하지만 한 가지 단점은 물체의 높이를 고정할 수 없다는 점이다. <p><br><br>3. 높이가 고정된 여러 줄 텍스트를 세로 중앙에 배치 <br> <br><strong>이 방법은 더 복잡하므로 자세히 설명하겠습니다. 먼저 코드를 살펴보겠습니다. </strong></p>
<p>방법: <br><br> (1) 수직 정렬:중간 표시:테이블 셀. 이 방법의 의미는 객체를 테이블에 강제로 배치하는 것입니다. 수직 정렬:중간 기능은 테이블의 valign="center"와 동일합니다. <br><br> 원래는 매우 편리한 속성인데 IE에서는 이 속성을 지원하지 않습니다. 각 브라우저를 호환 가능하게 만들기 위해서는 다른 방법을 생각해야 합니다. <br><br> (2) 개체 내에 하위 개체를 만들고, 하위 개체 내에 하위 개체나 단락을 만듭니다. 웹 페이지에서: <br><br><p id="a"><p><p>여기에 여러 줄의 텍스트가 있으며 높이는 50px입니다. 높이는 50px</p>< ;/p></p> <br><br> CSS에서: <br><br>p {margin:0;}: FireFox의 기본 P 간격은 <br><br>#a {height:50px;position:relative;}: 높이를 50으로 설정합니다. 하위 개체를 기준으로 위치를 지정하려면 position:relative <br><br>#a p { *position:absolute;*top:50%; }: 앞의 별표 "*"는 IE에서만 지원되며 다른 브라우저에서는 이 설정을 무시합니다. position:absolute는 이 자식 개체의 위치를 절대 위치로 설정하고, top:50%는 표시를 위에서 50%, 즉 25px로 설정합니다(부모 개체의 높이가 50px 이상으로 설정되어 있기 때문). <br><br>#a p p {*position:relative;*top:-50%;}: 이 코드는 남은 높이의 50%만 위로 이동한다는 의미로 이해하면 됩니다. top은 음수 값으로 설정되어 있으므로 반대 방향으로 이동하는 것과 같습니다. <br><br>참고: 주류 브라우저를 지원합니다(IE6, FireFox2에서 테스트됨). <br></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="여백 및 오버플로 속성을 사용하여 div 간격을 구현하는 방법_경험 교환" href="https://m.php.cn/ko/faq/842.html">여백 및 오버플로 속성을 사용하여 div 간격을 구현하는 방법_경험 교환</a></span><span>다음 기사：<a class="dBlack" title="여백 및 오버플로 속성을 사용하여 div 간격을 구현하는 방법_경험 교환" href="https://m.php.cn/ko/faq/844.html">여백 및 오버플로 속성을 사용하여 div 간격을 구현하는 방법_경험 교환</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/841.html" title="CSS 작성 시 Border에 대해 주의해야 할 사항 요약" class="aBlack">CSS 작성 시 Border에 대해 주의해야 할 사항 요약</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/961.html" title="다중 스타일 선택 및 스타일 실시간 전환 구현 방법_경험 교환" class="aBlack">다중 스타일 선택 및 스타일 실시간 전환 구현 방법_경험 교환</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1345.html" title="Marquee의 상세한 사용 분석" class="aBlack">Marquee의 상세한 사용 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/269606.html" title="CSS3中优雅降级和渐进增强的区别" class="aBlack">CSS3中优雅降级和渐进增强的区别</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
