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 الموضع تمامًا ؛ إذا كنت لا تعرف حجم العنصر الأصل ، فيمكننا الحصول عليه من خلال عرض مكتبة jQuery وارتفاعها ، css('width') و css('height') حجم العنصر ، ثم تعيين اليسار وأعلى.

الصيغة: يساوي اليسار 50 ٪ ناقص نصف عرض العنصر ، والجزء العلوي يساوي 50 ٪ ناقص نصف ارتفاع العنصر.

يمكن حسابها من خلال حساب تعبير CSS ، ويمكن أيضًا تعيينها عن طريق تعيين الهامش على القيمة السالبة المقابلة ، ويمكن أيضًا تعيينه بواسطة shift.

هذه الطريقة واضحة وفعالة ، ولكنها ليست بسيطة وأنيقة بما فيه الكفاية.


    
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 Python3 Python MySQL MariaDB YUM JavaScript CSS Redis MySQL8 caching_sha2_password HTML mysql_native_password PHP7 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 .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

آخر مقال