Wie stelle ich den Seiteninhalt in die Mitte des Bildschirms? [duplicate]

Lesezeit: 6 Minuten

Benutzer-Avatar
mdivk

Mögliches Duplikat:

So richten Sie ein

mittig auf der Seite aus

Ich muss den Inhalt einer Webseite in der Mitte des Bildschirms anzeigen, egal welche Bildschirmgröße es ist, ob groß oder klein, Auflösung hoch oder niedrig, es wird immer automatisch an die Mitte des Bildschirms angepasst.

  • Ich gehe davon aus, dass “Mitte des Bildschirms” die Mitte des Browsers bedeutet? Benötigen Sie außerdem eine vertikale, horizontale oder beides Zentrierung?

    – JohnFx

    19. Juni 2012 um 2:28 Uhr

Ich vermute, Sie möchten das Feld unabhängig von der Größe des Browserfensters sowohl vertikal als auch horizontal zentrieren. Da Sie eine feste Breite und Höhe für die Box haben, sollte dies funktionieren:

Auszeichnung:

<div></div>

CSS:

div {
    height: 200px;
    width: 400px;
    background: black;

    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}

Das div sollte in der Mitte des Bildschirms bleiben, auch wenn Sie die Größe des Browsers ändern. Ersetzen Sie einfach margin-top und margin-left durch die Hälfte der Höhe und Breite Ihrer Tabelle.

Bearbeiten: Kredit geht an CSS-Trickswo ich die ursprüngliche Idee hatte.

  • Geht das ohne CSS?

    – Benutzer4951

    27. Februar 2017 um 15:24 Uhr

  • Geht

    innerhalb oder außerhalb des Körpers?

    – Benutzer1807271

    26. Juli 2017 um 19:32 Uhr

  • @ user1807271 Ich bin mir nicht sicher, ob ich es verstehe, aber das <div>s sollte den Inhalt, den Sie zentrieren möchten, innerhalb des Dokumentkörpers umschließen. Diese Antwort ist jetzt auch ein wenig veraltet. Es ist viel einfacher, Dinge mit CSS3 Flexbox zu zentrieren.

    – Zhihao

    26. Juli 2017 um 21:21 Uhr

Benutzer-Avatar
Charlie

Lösung für den von Ihnen geposteten Code:

.center{
    position:absolute;
    width:780px;
    height:650px;
    left:50%;
    top:50%;
    margin-left:-390px;
    margin-top:-325px;
}

<table class="center" width="780" border="0" align="center" cellspacing="2" bordercolor="#000000" bgcolor="#FFCC66">
      <tr>
        <td>
        <table width="100%" border="0">
      <tr>
        <td>
        <table width="100%" border="0">
        <tr>
            <td width="150"><img src="https://stackoverflow.com/questions/11093603/images/banners/BAX Company.jpg" width="149" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
            <td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
            <td width="150"><img src="https://stackoverflow.com/questions/11093603/images/banners/BAX Company.jpg" width="149" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>        
        </tr>
        </table>
        </td>
      </tr>
      <tr>
        <td>
        <table width="100%" border="0">
        <tr>
            <td width="150"><img src="https://stackoverflow.com/questions/11093603/images/banners/BAX Company.jpg" width="149" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>
            <td width="300"><img src="images/banners/Closet.jpg" width="300" height="130" /></td>
            <td width="150"><img src="https://stackoverflow.com/questions/11093603/images/banners/BAX Company.jpg" width="149" height="130" /></td>
            <td width="150"><img src="images/banners/BAX Location.jpg" width="149" height="130" /></td>        
        </tr>
        </table>
        </td>
      </tr>
</table>

Wie funktioniert das?

Beispiel: http://jsfiddle.net/953Yj/

<div class="center">
    Lorem ipsum
</div>

.center{
    position:absolute;
    height: X px;
    width: Y px;
    left:50%;
    top:50%;
    margin-top:- X/2 px;
    margin-left:- Y/2 px;
}
  • X würdest du deine Größe haben.
  • Y wäre deine Breite.

Zur Positionierung der div vertikal und horizontal teilen X und Y durch 2.

  • Eine Ablehnung? Was vermisse ich?

    – Charlie

    19. Juni 2012 um 3:30 Uhr

  • was ist downvote? Ich bin dieses Forum nicht gewohnt, vielleicht habe ich versehentlich etwas falsch gemacht? Entschuldigung, wenn das der Fall ist

    – mdivk

    19. Juni 2012 um 15:12 Uhr

  • Vielleicht warst du es nicht, aber ich habe den Beitrag mit dem von dir geposteten Code aktualisiert. Fügen Sie außerdem den Code, den Sie unten gepostet haben, in die ursprüngliche Frage ein, anstatt als Antwort.

    – Charlie

    19. Juni 2012 um 15:21 Uhr

  • Tut mir leid, dass ich diesen Beitrag noch ungelöst halten muss, ich benutze Kays Lösung und es funktioniert fast das, was ich will, und Sie können es hier sehen:xiexianhui.com/baxjoomla15/index0.html, aber: es gibt drei Probleme: 1. Abstand zwischen Die zwei Reihen sind zu viel, wie kann man sie nur als 1px einstellen? 2. Der Hintergrund unterscheidet sich von der gesamten Seite. 3. Die Seite funktioniert nicht vollständig mit dem Handy. mein handy ist ein sony xperia ray mit einem bildschirm von 480 x 854 pixeln, es zeigt keine bilder, wenn ich auf die seite navigiere. Ich denke, ich muss auch die Größe des Bildes automatisch ändern. Kann mir jemand sagen, wie ich sie sortieren kann?

    – mdivk

    20. Juni 2012 um 15:32 Uhr

  • Wenn der Abstand ausgeschaltet ist, liegt das nicht an unserem Code. Wenn der Hintergrund anders ist, ändern Sie ihn. Sie haben nie angegeben, dass dies auf Ihrem Telefon funktionieren soll, aber wenn Sie möchten, machen Sie das div das wird zentriert ≤ 480px. Dass keine Bilder angezeigt werden, ist ein Problem mit Ihrem Code, nicht mit dem, was wir gepostet haben.

    – Charlie

    20. Juni 2012 um 20:35 Uhr

Benutzer-Avatar
kay

Wenn Sie den Inhalt horizontal und vertikal zentrieren möchten, aber vorher nicht wissen, wie hoch Ihre Seite werden soll, müssen Sie JavaScript verwenden.

HTML:

<body>
    <div id="content">...</div>
</body>

CSS:

#content {
    max-width: 1000px;
    margin: auto;
    left: 1%;
    right: 1%;
    position: absolute;
}

JavaScript (mit jQuery):

$(function() {
    $(window).on('resize', function resize()  {
        $(window).off('resize', resize);
        setTimeout(function () {
            var content = $('#content');
            var top = (window.innerHeight - content.height()) / 2;
            content.css('top', Math.max(0, top) + 'px');
            $(window).on('resize', resize);
        }, 50);
    }).resize();
});

Horizontal und vertikal zentriert

Demo: http://jsfiddle.net/nBzcb/

  • Danke Leute, fast da, Kays Antwort ist die nächste, sie wird horizontal zentriert, aber nicht vertikal, warum? Hier ist mein Code, ich habe alles in eine einzige HTML-Datei gesteckt – was ich brauche, danke.

    – mdivk

    19. Juni 2012 um 13:56 Uhr

  • wenn ich die gleiche URL wie in Ihrem Beitrag eingebe: fiddle.jshell.net/_display es gibt mir: {“Fehler”: “Bitte POST-Anforderung verwenden”}

    – mdivk

    19. Juni 2012 um 15:34 Uhr

  • @mdivk Das Bild zeigt das Ergebnis-Unterfenster der verknüpften Geige. Die kanonische URL dieses Unterfensters lautet fiddle.jshell.net/nBzcb/show.

    – kay

    19. Juni 2012 um 15:49 Uhr


  • Es wäre großartig, wenn Sie ein HTML posten könnten, um dies zu beheben. Bitte sehen Sie sich die Live-Demo an: xiexianhui.com/baxjoomla15/index0.html, danke, die Datei wurde basierend auf Ihrer Quelldatei erstellt. anscheinend funktioniert es nicht einwandfrei. Könnten Sie mir die Arbeitsdatei (basierend auf meiner Tabelle?) an xie3208080 gmail senden? Danke.

    – mdivk

    19. Juni 2012 um 17:20 Uhr


  • jsfiddle.net/PV9pD (Standalone-Demo) ← funktioniert. PS: Der “/banners/”-Teil der URL Ihrer Bilder bewirkt, dass mein Adblocker sie blockiert.

    – kay

    19. Juni 2012 um 17:46 Uhr

Benutzer-Avatar
Amin Mussawi

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Center</title>        
    </head>
    <body>
        <div id="main_body">
          some text
        </div>
    </body>
</html>

CSS

body
{
   width: 100%;
   Height: 100%;
}
#main_body
{
    background: #ff3333;
    width: 200px;
    position: absolute;
}​

JS (jQuery)

$(function(){
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    var main = $("#main_body");    
    $("#main_body").css({ top: ((windowHeight / 2) - (main.height() / 2)) + "px",
                          left:((windowWidth / 2) - (main.width() / 2)) + "px" });
});

Siehe Beispiel hier

1205860cookie-checkWie stelle ich den Seiteninhalt in die Mitte des Bildschirms? [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy