Wie zum zentrieren eines div-Tags in eine html-Seite ohne Beeinträchtigung durch Zoomen

Ich habe eine html-Seite mit ein paar div-tags, ich möchte meine div-container im Zentrum computer-Bildschirm, ob ich zoom-in oder zoom-out.

Will ich ändern meine html-Seite in einer solchen Weise, wie www.bing.com. Die homepage zentriert auf dem Bildschirm, wenn Sie die zoom-out, in der Erwägung, meine web-Seite kontinuierlich erweitert, während Zoomen.

Meine HTML-Querverweis:

 <html>
      <head>
        <title>
          HTML test page
        </title>
        <style>
          .horizontal{
        width:100%;
        height:100px;
        background-color: #bbb;
          }
          .vertical{
        width:100px;
        height:70%;
        background-color: #bbb;
          }
          #container{
        margin:auto;
        width:100%;
        height:100%;
          }
        </style>
      </head>
      <body>
        <div id="container">
        <div class="horizontal">
        </div>
        <div class="vertical" style="float:left;">
        </div>
        <div class="vertical" style="float:right;">
        </div>
        <div class="horizontal" style="float:left;" >     
        </div>
        <h1 style="font-size:3em; color:Green; text-align:center;">
             HTML Test page
        </h1>
        </div>
      </body>
    </html>

Wie Sie meinen CSS-code, so dass ich umsetzen kann, zentralen Seitenvorlage dasselbe (www.bing.com)? Ich möchte zu zentralisieren meine div-container auf drücken Ctrl+-

haben Sie das Leben irgendwo noch ?
Nein, noch Nicht....
bitte besuchen Sie www.bing.com weil das ist, was ich implementieren muss

InformationsquelleAutor User97987 | 2013-08-16

Nach der Suche, die bing-Seite, die Sie nur nach uns, ich glaube, das ist, was Sie wahrscheinlich wollen, dass diese

    <html>
      <head>
        <title>
            HTML test page
        </title>
        <style>
body {
    width: 100%;
    height: 100%;
    margin:auto;
}
#container {
    vertical-align: middle;
    margin:auto;
    height:100%;
    width:100%;
    display: table;
}
span {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    font-size:5em;
    color:#fff;
}
#inner {
    margin:auto;
    width:50%;
    height:auto;
    border:100px solid #bbb;
    color:Green;}
        </style>
      </head>
      <body>
    <body>
        <div id="container">
        <div class="horizontal">
            </div>
            <div class="vertical" style="float:left;">
            </div>
            <div class="vertical" style="float:right;">
            </div>
            <div class="horizontal" style="float:left;" >     
            </div>
            <span><div id="inner">HTML Test page</div>
            </span>
        </div>
    </body>
      </body>
    </html>

Dies schafft eine 100px große Grenze, um Ihre div, die ausgerichtet ist in der Mitte, wie Sie wollen

InformationsquelleAutor navin

1

Ich gerade überprüfen bing.com. Es scheint, Sie ändern die position und die Größe Ihrer zentrierten div mit JS. Es zentriert, während die Seite geladen und das gleiche, wenn die Seite re-sized. Und vergessen Sie nicht, absolute position für #container.
```
<script>
$(window).resize(function() {
    doResize();
}

$(document).ready(function(){
    doResize();
}

function doResize() {  
    var windowHeight = $(window).height();
    $('#container').css('top',(windowHeight - $('#container').height())/2);
}

</script>
```
- Sollte ich wirklich zu schätzen für Ihre jQuery-Fähigkeiten, aber ich würde gerne zu tun, dass mit CSS nur, Anyways... Danke
- Wenn Sie möchten, verwenden nur HTML + CSS sind, können Sie versuchen, machen Tabelle 3x3 und stellen Sie Ihre DIV in die Mitte der Zelle. So weit ich weiß, gibt es keine gute Lösung für vertikales ausrichten in block-layout.
InformationsquelleAutor user2443795
1

es hat etwas mit dir zu tun Verwendung von Prozentsätzen anstatt zu sagen, Pixel-oder EMs -

Habe ich es so, dass es zentriert bleiben, aber ich habe es immer noch kleben am oberen Rand des Browsers.
```
<html>
  <head>
    <title>
      HTML test page
    </title>
    <style>
      .horizontal{
    width:100%;
    height:100px;
    background-color: #bbb;
      }
      .vertical{
    width:100px;
    height:250px;
    background-color: #bbb;
      }
      #container{
    margin:auto auto;
    width:750px;
    height:400px;
      }
    </style>
  </head>
  <body>
    <div id="container">
    <div class="horizontal">
    </div>
    <div class="vertical" style="float:left;">
    </div>
    <div class="vertical" style="float:right;">
    </div>
    <div class="horizontal" style="float:left;" >     
    </div>
    <h1 style="font-size:3em; color:Green; text-align:center;">
         HTML Test page
    </h1>
    </div>
  </body>
</html>
```
Bearbeiten Möglichkeit
man könnte ein MediaQuery und legen Sie die top:###px so, dass der rest der Seite setzt sich mit der Mitte. aber Sie würden wahrscheinlich haben, um mehrere CSS-Dateien oder schreiben Sie eine Menge CSS-code, damit es funktioniert

Antwort auf css bekommen Höhe der Bildschirm-Auflösung

diese Antwort hat einen link zu Medien-Abfragen, die Sie dauert w3.org Media Queries Website
- Danke, Aber ich möchte, dass Sie gehen, um http://www.bing.com,, weil ich will Mitte meine ganzen div, dein code ist wirklich hilfreich, aber es zentriert es von oben der Seite, ich möchte mein div in der Mitte des Browsers, nicht im top
- es ist ein vertical-align im CSS, aber ich kann nicht aus irgendeinem Grund, dass es funktioniert auf die Div in den body-tag. Sie sind zu haben, um mit irgendeiner form von Javascript zu erreichen, was genau dort Los ist denke ich
- Hmm... Okay, ich bin auf der Suche nach es.. jedenfalls vielen Dank für deine freundliche Hilfe
- Ich bearbeitet meine Antwort. Ich bin nicht sicher, dass Media Queries wird die Arbeit mit Zoomen aber? dachte, es war einen Versuch Wert.
InformationsquelleAutor Malachi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.