Hallo Ich bin neu zu html/css und ich frage mich, wie divs zu zentrieren, so dass wenn ich zu einem anderen Monitor wechseln sie bleiben der gleiche Platz.Versuchen, meine divs zu zentrieren, so dass, wenn ich Monitore wechseln sie die gleiche Größe bleiben

Das Problem im Moment ist, dass wenn ich Monitore wechselt der Header bewegt, so dass es nicht mit der Kante des großen Div unterhalb ausgerichtet ist. Ich würde es, wenn, wenn Sie Monitore schalten alles gestreckt in pro-Teil auf den neuen Monitor

This is what it looks like on one monitor This is what it looks like on second monitor Ich würde es gerne so die Header-Titel Linien mit dem div Feld, unabhängig davon, welche überwachen sie angezeigt wird auf. So, wie es auf einem Monitor ist, wie wird es auf dem anderen Monitor

HTML

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>About</title> 
     <link rel="stylesheet" type="text/css" href="about.css"> 
     <script> </script> 
    </head> 
    <body> 

    <div class="mainContainer"> 

     <div class="header"> 

      <div id="headerTopSection"> 
       <div id="titleWordsWrapper"> 
        <div id="titleHeaderTailored">Tailored 
         <div id="titleHeaderSystems">Systems</div> 
        </div> 
       </div> 

       <div id="productsAndInformationWrapper"> 
       <div id="contactUs">Contact</div> 
       <div id="products">Products</div> 
       </div> 
      </div> 
     </div> 
      <div id="midSection">Need this to stay the same</div> 

    </div> 
    </body> 
    </html>

CSS

div{ 
    border-style:solid; 
    border-width:1px; 
    border-color:white; 
} 
html{ 
    height: 100%; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
} 
body{ 
     background-color: #252322; 
} 
.mainContainer{ 
    margin-left:auto; 
    margin-right:auto; 
    width: auto; 
    height: 400px; 
} 
.header{ 
    background-color: #252322; 
    font-family: arial, sans-serif; 
    height: 80px; 
    overflow: hidden; 
    padding-top: 19px; 
} 
#headerTopSection{ 
    height: 80px; 
    width: auto: 0px; 
} 
#titleWordsWrapper{ 
    width: 350px; 
    height: 50px; 
    float: left; 
} 

#titleHeaderTailored{ 
    color: white; 
    font-size: 30px; 

} 
#titleHeaderSystems{ 
    color: yellow; 
    display: inline-block; 
    font-size: 30px; 
} 
#productsAndInformationWrapper{ 
    width: 350px; 
    height: 50px; 
    float: right; 
} 
#products{ 
    float: right; 
    color: white; 
    font-size: 30px; 
    padding-right: 20px; 

} 
#contactUs{ 
    float: right; 
    color: white; 
    font-size: 30px; 
} 
#midSection{ 
    height: 200px; 
    width: 1000px; 
    background-color: #282625; 
    clear: left; 
    margin-left: auto; 
    margin-right: auto; 
    color: white; 
}

Quelle

2016-05-20 Davis

Sie margin-left: auto; auf #midSection verwenden angezeigt werden, so wird es auf jeden Fall selbst Autom.Ausrichtung Im zentrum. Zu bekommen, was Sie den Wert korrigieren möchten

margin-left: 120px <---change value accordingly

Quelle

2016-05-20 23:21:31

Sie für die Hilfe danken – Davis

Versuchen, meine divs zu zentrieren, so dass, wenn ich Monitore wechseln sie die gleiche Größe bleiben

HTML

CSS

Antwort

Verwandte Themen