网页居中问题_html/css_WEB-ITnose
各位前辈,
我想让网页的主div居中,让后在网上查了一下说是使用margin:0 auto;的方法让主div居中让后在在里面添加其他的div,但是当我对后添加的div使用绝对定位时网页不能正常显示,我想请问一下如果我打算对网页中的div都是用绝对定位的方式(这是方式简单粗暴),我应该怎样使网页在浏览器中居中。
结构大概简要为如下方案。
//怎样使这个div居中而下面的次div在这个div内绝对定位。
...
非常感谢。
顺便问一下通常情况的网页居中使用的是什么方法。
是不是在存在父子关系的div中不允许使用混合的定位方法。
回复讨论(解决方案)
当前页面就是div居中的,你f12看下css
主div给个width宽度之后,使用margin:0 auto来实现主div在页面居中。次div如果要相对主div position:absolute绝对定位的话,那么主div需要position:relative相对定位。
给主div一个宽度width:**px;,然后加上margin:0 auto;这个属性,主div就可以居中了。
如果子div使用定位需要给父级div加上position:relevant; 然后子定义position:absolute;再配合top,right,left,bottom进行定位。
如
里面的内容会离居中那个盒子上10像素,左10像素。
你DIV如果没有宽度 是居中不了的 你用margin:auto; 这只能水平居中 想要全局居中 你可以用绝对定位position:absolute来实现。另外还有的实现方法就是用JS来实现。获取浏览器的高度 然后减去DIV的高度 之后除以2就可以了。
1、主div指定宽度,并margin: 0 auto;
2、次div用float: left;position: relative; 进行布局
3、次div不要用position: absolute; 布局

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert
