EverKB

Knowledge Base Ever

Dvije metode za postavljanje apsolutno pozicioniranih elemenata kao što su div vodoravno i vertikalno u CSS sa CSS-om

2019-11-29 01:05:01

oznaka: HTML, CSS, absolute, center, horiz-align, vertical-align, margin, Središte gore i dolje, centar lijevo i desno, centar u slojevima, središnji elementi, okvir za prijavu

Pozadina pregleda

Čak i ako razumijemo svojstva svakog HTML elementa u CSS jeziku, i dalje je teško napisati čisti CSS kod kada trebamo postaviti vertikalno i horizontalno centriranje apsolutno pozicioniranog elementa.

Ako ste ovdje tražili iz tog razloga, tada možete izravno koristiti kod druge metode.

Svi preglednici spomenuti u ovom članku ne uključuju izrazito stare preglednike koji ne implementiraju marign:auto standard, niti preglednike s zanemarivim tržišnim udjelom.

Izravna metoda, postavljanjem lijeve i gornje osobine elementa

Ako znate veličinu roditeljskog elementa, možete postaviti lijeva i gornja svojstva apsolutno pozicioniranog HTML elementa u središte; ako ne znate veličinu roditeljskog elementa, možemo dobiti širinu i visinu, css('width') i css('height') knjižice jQuery Veličina elementa, zatim postavite lijevo i odozgo.

Formula: lijevo je jednako 50% minus polovina širine elementa, a vrh je jednako 50% minus polovina visine elementa.

Može se izračunati izračunom CSS izraza, može se postaviti i postavljanjem margine na odgovarajuću negativnu vrijednost, a može se postaviti i pomakom.

Ova metoda je jednostavna i učinkovita, ali nije dovoljno jednostavna i elegantna.


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

Automatska metoda: postavite maržu na auto

Ova je metoda jednostavna i djeluje na modernim preglednicima. Pouzdanost ove metode određena je konzistentnošću implementacije pretraživača za unos teksta.
.el {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
U posljednjih pet godina ovu metodu obično koristimo za postavljanje centriranja HTML elementa.

oznaka

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