EverKB

Knowledge Base Ever

Δύο μέθοδοι για να ορίσετε απολύτως τοποθετημένα στοιχεία όπως το div οριζόντια και κάθετα στο CSS με CSS

2019-11-29 01:05:01

Ετικέτα: HTML, CSS, absolute, center, horiz-align, vertical-align, margin, Κέντρο προς τα πάνω και προς τα κάτω, κέντρο αριστερά και δεξιά, κεντρικά σε στρώματα, κεντρικά στοιχεία, πλαίσιο σύνδεσης

Επισκόπηση ιστορικού

Ακόμα και αν κατανοήσουμε τις ιδιότητες κάθε στοιχείου HTML στη γλώσσα CSS, εξακολουθεί να είναι δύσκολο να γράψουμε καθαρό κώδικα CSS όταν πρέπει να ορίσουμε την κάθετη και οριζόντια κεντράρισμα ενός απολύτως τοποθετημένου στοιχείου.

Εάν αναζητήσατε εδώ για αυτόν τον λόγο, τότε μπορείτε να χρησιμοποιήσετε απευθείας τον κώδικα της μεθόδου δύο.

Όλα τα προγράμματα περιήγησης που αναφέρονται σε αυτό το άρθρο δεν περιλαμβάνουν εξαιρετικά παλιά προγράμματα περιήγησης που δεν εφαρμόζουν το πρότυπο marign:auto ούτε προγράμματα περιήγησης με αμελητέο μερίδιο αγοράς.

Άμεση μέθοδος, ρυθμίζοντας τις αριστερές και τις κορυφαίες ιδιότητες του στοιχείου

Εάν γνωρίζετε το μέγεθος του γονικού στοιχείου, μπορείτε να ορίσετε την κεντρική και αριστερή ιδιότητα του τοποθετημένου στοιχείου HTML, αν δεν γνωρίζετε το μέγεθος του γονικού στοιχείου, μπορούμε να πάρουμε το πλάτος και το ύψος, css('width') και css('height') της βιβλιοθήκης jQuery. Το μέγεθος του στοιχείου, κατόπιν ορίστε αριστερά και πάνω.

Φόρμουλα: αριστερά ισούται με το 50% μείον το ήμισυ του πλάτους του στοιχείου και το πάνω ισούται με το 50% μείον το ήμισυ του ύψους του στοιχείου.

Μπορεί να υπολογιστεί με τον υπολογισμό της έκφρασης CSS, μπορεί επίσης να οριστεί με ρύθμιση του περιθωρίου στην αντίστοιχη αρνητική τιμή και μπορεί επίσης να ρυθμιστεί με βάρδιες.

Αυτή η μέθοδος είναι απλή και αποτελεσματική, αλλά όχι αρκετά απλή και κομψή.


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

Αυτόματη μέθοδος: ορίστε περιθώριο σε αυτόματη

Αυτή η μέθοδος είναι απλή και λειτουργεί σε σύγχρονα προγράμματα περιήγησης. Η αξιοπιστία αυτής της μεθόδου καθορίζεται από τη συνέπεια της υλοποίησης του μηχανισμού στοιχειοθέτησης του προγράμματος περιήγησης.
.el {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
Τα τελευταία πέντε χρόνια χρησιμοποιούμε συνήθως αυτή τη μέθοδο για να ορίσουμε το κέντρο ενός στοιχείου HTML.

Ετικέτα

CentOS7 CentOS PHP Linux Python Python3 MySQL MariaDB YUM JavaScript HTML mysql_native_password PHP7 CSS Redis MySQL8 caching_sha2_password 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 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 DATE_SUB Phalcon SQL Server 2017 WiFi .htaccess 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

Τελευταίο άρθρο