Wie man den Text in CSS so einstellt, dass der Text im Objekt vertikal auf dem Objekt zentriert ist, ist ebenfalls ein Problem, das viele Freunde stört. Viele Codes im Internet sind heutzutage nicht browserkompatibel. Ich habe die relevanten Methoden im Internet aussortiert und einige Änderungen vorgenommen. Es ist vollständig mit allen gängigen Browsern kompatibel.
Lassen Sie uns über vertikale Zentrierungsmethoden in verschiedenen Situationen sprechen.
1. Eine Textzeile ist vertikal zentriert
Sehen Sie sich den folgenden Code an:
Script Home-css vertikale Mitte</title> ; <br/><script type="text/javascript" language="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><style type="text/css"> 10px ; <br> Schriftgröße: 12px; <br> Hintergrundfarbe: #CCC; : 0 5px; <br> overflow:hidden; <br>background-color:#F90;<br>#sel { <br>margin-top:5px; } <br>select { <br> width:260px <br>} <br></head> = "all"> <br><p id="sub">Eine Textzeile ist vertikal zentriert und die Höhe dieses Objekts beträgt 20px</p> <p id="sel "><select onchange="sel(this.value)"><option value="1">Standardwert, setzen Sie die Zeilenhöhe auf: normal</option>< ;option value="2"> ;Legen Sie die Zeilenhöhe so fest, dass sie mit der Objekthöhe übereinstimmt: 20px</option><option value="3">Legen Sie die Zeilenhöhe so fest, dass sie größer als die Höhe des Objekts ist : 28px</option></select></p> <br></body> <br><br><br><br>Methode: line-height: 20px. Stellen Sie die gleiche Zeilenhöhe und Objekthöhe ein. <br><br>Hinweis: Diese Einstellung ist einfach, mit verschiedenen Browsern kompatibel und unterstützt Inline-Objekte. Wenn es sich jedoch um ein Objekt mit fester Höhe handelt, kann nur eine Zeile angezeigt werden. Wenn zwei Textzeilen vorhanden sind und „overflow:hidden“ nicht festgelegt ist, wird das Objekt gestreckt. <br><br>2. Mehrzeiliger Text und hochgradig anpassungsfähig <br> <br>Bitte sehen Sie sich den Code unten an: <br><br>Methode: padding-top:10px; padding-bottom:10px. Stellen Sie die gleiche Ober- und Unterpolsterung ein. <br><br>Beschreibung: Kompatibel mit verschiedenen Browsern, unterstützt Inline-Objekte und unterstützt auch Nicht-Text-Objekte wie img. Ein Nachteil besteht jedoch darin, dass die Höhe des Objekts nicht festgelegt werden kann. <br><br><br>3. Mehrzeiligen Text mit fester Höhe vertikal zentrieren <br> <br><br>Diese Methode ist komplizierter und ich werde sie im Detail erklären. Schauen wir uns zunächst den Code an: <br></p>
<p>Kaedah: <br><br> (1) vertical-align:mid; display:table-cell. Maksud kaedah ini ialah memaksa objek ke Jadual Fungsi vertical-align:middle adalah sama seperti valign="center" dalam jadual. <br><br> Pada asalnya atribut yang sangat mudah, tetapi IE tidak menyokong atribut ini. Untuk menjadikan setiap pelayar serasi, kita perlu memikirkan kaedah lain. <br><br> (2) Buat sub-objek dalam objek, dan cipta sub-objek atau perenggan dalam sub-objek. Dalam halaman web: <br><br><p id="a"><p><p>Terdapat teks berbilang baris di sini, ketinggiannya ialah 50px. Terdapat teks berbilang baris di sini. ketinggiannya ialah 50px</p>< ;/p></p> <br><br> Dalam CSS: <br><br>p {margin:0;}: Kerana P lalai dalam FireFox dijarakkan <br><br>#a {height:50px;position:relative;}: Tetapkan ketinggian kepada 50. Jika sub-objek hendak diposisikan secara relatifnya, tetapkan position:relative <br><br>#a p { *position:absolute;*top:50%; }: Asterisk "*" di hadapan hanya disokong oleh IE, pelayar lain akan mengabaikan tetapan ini. position:absolute menetapkan kedudukan objek anak ini kepada kedudukan mutlak, top:50% menetapkan paparan pada 50% dari atas, iaitu, 25px (kerana ketinggian objek induk ditetapkan kepada 50px di atas). <br><br>#a p p {*position:relative;*top:-50%;}: Kod ini hanya boleh difahami sebagai bergerak ke atas sebanyak 50% daripada ketinggian yang tinggal. Kerana atas ditetapkan kepada nilai negatif, ia bersamaan dengan bergerak ke arah yang bertentangan. <br><br>Nota: Menyokong penyemak imbas arus perdana (diuji di bawah IE6, FireFox2). <br></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="So implementieren Sie den Div-Abstand mithilfe von Rand- und Überlaufattributen_Experience-Austausch" href="https://m.php.cn/de/faq/842.html">So implementieren Sie den Div-Abstand mithilfe von Rand- und Überlaufattributen_Experience-Austausch</a></span><span>Nächster Artikel：<a class="dBlack" title="So implementieren Sie den Div-Abstand mithilfe von Rand- und Überlaufattributen_Experience-Austausch" href="https://m.php.cn/de/faq/844.html">So implementieren Sie den Div-Abstand mithilfe von Rand- und Überlaufattributen_Experience-Austausch</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/841.html" title="Zusammenfassung dessen, worauf Sie beim Schreiben von CSS bezüglich Border achten müssen" class="aBlack">Zusammenfassung dessen, worauf Sie beim Schreiben von CSS bezüglich Border achten müssen</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/961.html" title="So realisieren Sie die Auswahl mehrerer Stile und den Echtzeitwechsel von Stilen. Erleben Sie den Austausch" class="aBlack">So realisieren Sie die Auswahl mehrerer Stile und den Echtzeitwechsel von Stilen. Erleben Sie den Austausch</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1345.html" title="Detaillierte Nutzungsanalyse von Marquee" class="aBlack">Detaillierte Nutzungsanalyse von Marquee</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/269606.html" title="CSS3中优雅降级和渐进增强的区别" class="aBlack">CSS3中优雅降级和渐进增强的区别</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/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><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
