EverKB

Knowledge Base Ever

Dalawang mga pamamaraan upang itakda ang mga ganap na nakaposisyon na elemento tulad ng div nang pahalang at patayo sa CSS na may CSS

2019-11-29 01:05:01

Label: HTML, CSS, absolute, center, horiz-align, vertical-align, margin, Center pataas at pababa, gitna kaliwa at kanan, sentro sa mga layer, mga elemento ng sentro, kahon ng pag-login

Pangkalahatang-ideya ng background

Kahit na nauunawaan natin ang mga katangian ng bawat elemento ng HTML sa wikang CSS, mahirap pa rin na magsulat ng purong CSS code kung kailangan nating itakda ang patayo at pahalang na pagsentro ng isang ganap na nakaposisyon na elemento.

Kung naghanap ka rito para sa kadahilanang ito, maaari mong direktang magamit ang code ng pamamaraan ng dalawa.

Ang lahat ng mga browser na nabanggit sa artikulong ito ay hindi nagsasama ng mga sobrang lumang browser na hindi nagpapatupad ng pamantayan ng marign:auto, o ang mga browser na may kapabayaan na pagbabahagi ng merkado.

Direktang pamamaraan, sa pamamagitan ng pagtatakda ng kaliwa at tuktok na mga katangian ng elemento

Kung alam mo ang laki ng elemento ng magulang, maaari mong itakda ang kaliwa at tuktok na mga katangian ng ganap na nakaposisyon na elemento ng HTML na isentro; kung hindi mo alam ang laki ng elemento ng magulang, makakakuha kami ng lapad at taas, css('width') at css('height') ng jQuery library Ang laki ng elemento, pagkatapos ay itakda ang kaliwa at itaas.

Formula: kaliwa ay katumbas ng 50% minus kalahati ng lapad ng elemento, at ang tuktok ay katumbas ng 50% na minus kalahati ng taas ng elemento.

Maaari itong kalkulahin ng calc ng expression ng CSS, maaari rin itong itakda sa pamamagitan ng pagtatakda ng margin sa kaukulang negatibong halaga, at maaari rin itong itakda sa pamamagitan ng shift.

Ang pamamaraang ito ay prangka at epektibo, ngunit hindi simple at sapat na matikas.


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

Awtomatikong pamamaraan: itakda ang margin sa auto

Ang pamamaraan na ito ay simple at gumagana sa mga modernong browser. Ang pagiging maaasahan ng pamamaraang ito ay natutukoy ng pare-pareho ng pagpapatupad ng pag-type ng engine ng pag-type ng browser.
.el {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
Sa huling limang taon, karaniwang ginagamit namin ang pamamaraang ito upang itakda ang pagsentro ng isang elemento ng HTML.

Label

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

Pinakabagong artikulo