Diese divs in meinem Layout werden nicht zentriert. Ich habe alles versucht

Ich bin so schrecklich in CSS es ist lustig.Diese divs in meinem Layout werden nicht zentriert. Ich habe alles versucht

Ich versuche zu lernen, indem Sie eine Webseite kopieren und es passiert nicht für mich. Ich habe es in den letzten drei Tagen sieben Mal versucht und gelöscht, aber dieses Mal bin ich so nah dran, dass ich es nicht löschen kann.

Ich richte nur das Layout (vor den inneren Elementen), das ist der schwierigste Teil für mich.

Dies ist, was ich bisher:

.bod1 { 
 
    margin: auto; 
 
    width: 40%; 
 
    height: 700px; 
 
    background-color: red; 
 
    display: block; 
 
    float: left; 
 
} 
 
.bod2 { 
 
    margin: auto; 
 
    width: 20%; 
 
    height: 700px; 
 
    background-color: green; 
 
    display: block; 
 
} 
 
.foot { 
 
    margin:auto; 
 
    width: 60%; 
 
    height: 340px; 
 
    background-color: blue; 
 
    display: block; 
 
} 
 
#logo { 
 
    display: block; 
 
    float: left; 
 
    height: 81px; 
 
    width: 194px; 
 
    margin-top: 80px; 
 
} 
 

 
#tabs { 
 
    display: inline-block; 
 
    padding-top: 80px; 
 
    margin-right: 25px; 
 
    float: right; 
 
    color: black; 
 
} 
 
#tabs li { 
 
    display: inline; 
 
}


 

 

 
<body> 
 
    <div class="head"> 
 
    <div id="logo"> 
 
     <a href="#"><img src="https://images.mint.com/web-client/images/mint_logo.png" alt="Mint logo" /></a> 
 
    </div> 
 
    <div id="tabs"> 
 
     <ul> 
 
     <li>Sign up</li> 
 
     <li>Log in</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="bod1"> 
 
    <h1></h1> 
 
    </div> 
 
    <div class="bod2"> 
 
    </div> 
 
    <div class="foot"> 
 
    </div> 
 
</body>

Quelle

2017-01-23 Zac Paul

das Problem genauer beschreiben und wenn möglich erstellen jsfiddle –

Haben Sie versucht, 'margin: 0 auto;'? oder 'float: none;' –

Pls bieten fiddle – Uiupdates

Ich glaube, Sie entfernen float: left; „. BOD1" auf class =

.head { 
 
    margin: auto; 
 
    margin-top: 10px; 
 
    width: 60%; 
 
    height: 130px; 
 
    background-color: purple; 
 
    display: block; 
 
} 
 
.bod1 { 
 
    margin: auto; 
 
    width: 40%; 
 
    height: 700px; 
 
    background-color: red; 
 
    display: block; 
 
} 
 
.bod2 { 
 
    margin: auto; 
 
    width: 20%; 
 
    height: 700px; 
 
    background-color: green; 
 
    display: block; 
 
} 
 
.foot { 
 
    margin:auto; 
 
    width: 60%; 
 
    height: 340px; 
 
    background-color: blue; 
 
    display: block; 
 
} 
 
#logo { 
 
    display: block; 
 
    float: left; 
 
    height: 81px; 
 
    width: 144px; 
 
    margin-top: 50px; 
 
} 
 
#tabs { 
 
    display: inline-block; 
 
    padding-top: 50px; 
 
    margin-right: 25px; 
 
    float: right; 
 
    color: black; 
 
} 
 
#tabs li { 
 
    display: inline; 
 
}

<title> Mint > Start Here</title> 
 

 
<body> 
 
    <div class="head"> 
 
    <div id="logo"> 
 
     <a href="#"><img src="https://images.mint.com/web-client/images/mint_logo.png" alt="Mint logo" /></a> 
 
    </div> 
 
    <div id="tabs"> 
 
     <ul> 
 
     <li>Sign up</li> 
 
     <li>Log in</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <div class="bod1"> 
 
    <h1></h1> 
 
    </div> 
 

 
    <div class="bod2"></div> 
 
    <div class="foot"></div> 
 

 
</body>

Quelle

2017-01-23 06:44:49 Jainam

überprüfen Sie bitte folgenden Link zu machen, ich bin es für Sie:

https://jsfiddle.net/fatehjagdeo/qj7guLhj/

oder einfach nur Ihre HTML mit meinem unten ersetzen html:

<div class="head"> 
    <div id="logo"> 
     <a href="#"><img src="https://images.mint.com/web-client/images/mint_logo.png" alt="Mint logo"></a> 
    </div> 
    <div id="tabs"> 
     <ul> 
     <li>Sign up</li> 
     <li>Log in</li> 
     </ul> 
    </div> 
    </div> 

<div style="margin-right: auto; margin-left: auto; overflow: hidden; clear: both; width: 334px ! important;"> 


    <div class="bod1"> 
    <h1></h1> 


    </div> 
    <div class="bod2" style="float:left;"> 

    </div> 
</div> 
    <div class="foot" style="clear:both;"> 

    </div> 
</div> 
    <div class="foot"> 

    </div>

Quelle

2017-01-23 06:51:40

Ich nehme an, Sie wollen nur das rote div, das die Klasse 'bod1' hat, in der Mitte sein. Ich habe seinen Stil wie folgt angepasst

.bod1{ 
    width: 40%; 
    height: 700px; 
    background-color: red; 
    display: block; 
    position: absolute; 
    top: 140px; 
    left: 50%; 
    margin-left: -20%; 
}

Hoffe das hilft.

Quelle

2017-01-23 06:51:44 mok

Nur eine Mittelklasse für die div verwenden Sie

.center { 
    margin: auto; 
    width: 50%; 
} 

<div class="center">Div is centered</div>

Hoffen, dass diese Hilfe css

Quelle

2017-01-23 06:52:52

Veränderung wie diese etwas centerd wollen: -

Wenn Sie so etwas wie dies tun wollen , für weitere Fragen kommentieren Sie unten.

.bod1 { 
    margin: -161px 111px; 
    width: 40%; 
    height: 700px; 
    background-color: red; 
    display: block; 
    float: left; 
} 
.bod2 { 
    margin: 0px 333px; 
    width: 20%; 
    height: 700px; 
    background-color: green; 
    display: block; 
}

hier ist Ihre jsfiddle link

Quelle

2017-01-23 07:03:33 yash

Diese divs in meinem Layout werden nicht zentriert. Ich habe alles versucht

Antwort

Verwandte Themen