EverKB

Knowledge Base Ever

Du būdai, kaip nustatyti absoliučiai išdėstytus elementus, tokius kaip padalijimas horizontaliai ir vertikaliai CSS su CSS

2019-11-29 01:05:01

Etiketė: HTML, CSS, absolute, center, horiz-align, vertical-align, margin, Centras aukštyn ir žemyn, centras kairėn ir dešinėn, centras sluoksniais, centro elementai, prisijungimo dėžutė

Fono apžvalga

Net jei suprantame kiekvieno HTML elemento savybes CSS kalba, vis tiek sunku parašyti gryną CSS kodą, kai reikia nustatyti vertikalų ir horizontalų absoliučiai išdėstyto elemento centravimą.

Jei čia ieškojote dėl šios priežasties, tuomet galite tiesiogiai naudoti antrojo metodo kodą.

Į visas šiame straipsnyje minimas naršykles neįeina nei labai senos naršyklės, neįgyvendinančios marign:auto standarto, nei naršyklės, kurių rinkos dalis nedidelė.

Tiesioginis metodas, nustatant kairiojo ir viršutinio elemento savybes

Jei žinote pradinio elemento dydį, galite jį centruoti nustatydami absoliučiai išdėstyto HTML elemento kairę ir viršutinę savybes; jei nežinote pagrindinio elemento dydžio, galime jį sužinoti per „jQuery“ bibliotekos plotį ir aukštį, css('width') ir css('height'). Elemento dydis, tada nustatykite kairę ir viršutinę dalis.

Formulė: kairioji lygi 50% atėmus pusę elemento pločio, o viršutinė lygi 50% atėmus pusę elemento aukščio.

Jį galima apskaičiuoti apskaičiuojant CSS išraišką, jį taip pat galima nustatyti nustatant paraštę iki atitinkamos neigiamos vertės, ją taip pat galima nustatyti pamainomis.

Šis metodas yra paprastas ir efektyvus, tačiau nėra pakankamai paprastas ir pakankamai elegantiškas.


    
center me
/* CSS */
.el {
    width: 400px;
    height: 400px;
    position: absolute; 
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -200px;
}

Automatinis metodas: nustatykite paraštę į automatinę

Šis metodas yra paprastas ir veikia šiuolaikinėse naršyklėse. Šio metodo patikimumą lemia naršyklės teksto rinkimo variklio diegimo nuoseklumas.
.el {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
Per pastaruosius penkerius metus mes dažniausiai naudojame šį metodą HTML elemento centravimui nustatyti.

Etiketė

CentOS7 CentOS PHP Linux Python3 Python MySQL MariaDB YUM JavaScript CSS Redis MySQL8 caching_sha2_password HTML mysql_native_password PHP7 Apache du jQuery PHP5.5 src cURL hide nginx Shadowsocks-Python V2Ray availability eth0 MariaDB10.4 PostgreSQL sub folder date Install MongoDB pdo_sqlsrv SOCKS5 Web Server File Upload mssql-tools register_shutdown_function Symfony ADDDATE DevExpress JetBrain php-fpm sqlsrv Zend Framework height network interface Shadowsocks-Libev unixODBC-devel Aura error_get_last Port 80 string data INDENTIFIED BY password policy requirements SOCKS Web Development Fedora Media Writer msodbcsql Redis5 SVN absolute Deepin jemalloc SQLAlchemy convert FuelPHP mysqlclient Shadowsocks toggle at-symbol Error Control Operator margin PHPUnit Framework ss5.passwd daemon process IIS password SOCKET vps center Fatal Errors MongoDB4 sudoers .htaccess DATE_SUB Phalcon SQL Server 2017 WiFi Compiling PHP frequency conflict set_error_handler TestCase apr Elasticsearch7.3 PHPUnit ss5.conf daemon HTTP particles.js Slim Vincent Garreau Failed to build these modules: _uuid MongoDB Sudo DATE_ADD ip command pg_bha.conf SQL Server width Compiling Apache Frameworks MySQL-python scrollbar Tcp BBR Apache2.4 Elasticsearch libpython3.7m.so.1.0 PHPStorm ss5-3.8.9 CURLOPT_POSTFIELDS NodeJs show VIM Bluetooth Failed to build these modules: _ctypes Minimal ISO substr date sub INTERVAL PECL SQL Date Funcitons Wi-Fi CodeIgniter font-size root Tag Cloud apache httpd dual network interfaces Laravel ss5 CURLFille horiz-align node.js ShadowsocksR vertical-align BarManager exec mb_substr PyCharm SUBDATE date add IntelliJIDEA PEAR SOCKS5 Proxy Server WebStorm Chrome find remi Tag

Naujausias straipsnis