這些div在我的佈局中不會居中。我已經嘗試了所有的東西

我對CSS很糟糕，這很有趣。這些div在我的佈局中不會居中。我已經嘗試了所有的東西

我想通過複製一個網頁來學習，但這並不適合我。我在過去三天嘗試並刪除了7次，但這次我非常接近我想要的，我無法刪除它。

我只設置了佈局（在內部元素之前），這是我最難的部分。

這是我到目前爲止有：

.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>

來源

2017-01-23 Zac Paul

更恰當地描述問題，如果可能創造的jsfiddle –

你試過'保證金：0汽車;'？或'float：none;' –

請提供小提琴 – Uiupdates

我想你可以刪除浮動：左; 「BOD1" 階級=

.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>

來源

2017-01-23 06:44:49 Jainam

請檢查下面的鏈接我讓它成爲你：

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

或只是我的下面代替你的HTML 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>

來源

2017-01-23 06:51:40

我假設你只是想讓班級'bod1'在中心的紅色div。我調整了它的風格如下

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

希望這有助於。

來源

2017-01-23 06:51:44 mok

只需使用一箇中心級的DIV要centerd

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

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

希望這有助於

來源

2017-01-23 06:52:52

變化css來是這樣的： -

如果你想要做這樣的事，以進一步查詢下面的評論。

.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; 
}

這裏是你的jsfiddle link

來源

2017-01-23 07:03:33 yash

這些div在我的佈局中不會居中。我已經嘗試了所有的東西

回答

相關問題