爲什麼我必須輸入「margin-left：12％」來居中我的div？

-2

我通過輸入「margin-left：12％」來設置水平居中div（id =「div_below_nav」）。據我所知，divs通常是使用「margin-left：auto」來水平居中的。&「margin-right：auto」。我試過了，但是div一路轉移到左邊。我很困惑，爲什麼會發生這種情況，如果有人能爲我解釋，我會很高興。爲什麼我必須輸入「margin-left：12％」來居中我的div？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>CLC Website</title> 
<link rel="stylesheet" href="main3.css"> 
</head> 
<body> 
<div id="header"> 

    <div id="nav"> 
     <img src="../images/logo.png" id="logo" alt="logo"> 
     <p id="logo_text">CLC</p> 
     <ul> 
      <li><a href="#">Contact Us</a></li> 
      <li><a href="#">Professors</a></li> 
      <li><a href="#">Courses</a></li> 
      <li><a href="#">About</a></li> 
     </ul> 
    </div> 

    <div id="welcome_text_div"> 
     <p id="welcome_text">The Best Offer</p> 
     <p id="welcome_under_text">Truth evades a single definition and true 
     understanding requires a comparative perspective</p> 
    </div> 

    <div id="div_below_nav"> 
    <p></p> 
    </div> 
</div> 
</body> 
</html>`

MY CSS：

body { 
margin: 0; 
background-color: #e7e5e5; 
} 

ul { 
margin-top: -50px; 
} 

li { 
float: right; 
font-weight: bold; 
} 

li a { 
display: block; 
text-decoration: none; 
text-align: center; 
font-family: sans-serif; 
color: white; 
border-right: 1px solid white; 
padding: 8px; 
} 

li a:visited { 
text-decoration: none; 
color: white; 
font-family: sans-serif; 
} 

li a:hover:not(.active) { 
background-color: #333; 
} 


#header { 
position: relative; 
width: 100%; 
height: 600px; 
background-image: url('bg.jpg'); 
background-repeat: no-repeat; 
background-size: 100% 100%; 
} 

#nav { 
position: absolute; 
width: 100%; 
height: 50px; 
} 

#logo { 
width: 50px; 
height: 50px; 
} 

#logo_text { 
position: absolute; 
display: inline; 
top: -9px; 
left: 55px; 
font-size: 20px; 
font-family: sans-serif; 
color: white; 
font-weight: bold; 
} 

#welcome_text_div { 
position: absolute; 
width: 800px; 
height: 300px; 
top: 50%; 
margin-top: -150px; 
left: 50%; 
margin-left: -400px; 
} 

#welcome_text { 
color: white; 
font-family: sans-serif; 
text-transform: uppercase; 
font-weight: bold; 
font-size: 60px; 
text-align: center; 
} 

#welcome_under_text { 
color: white; 
font-family: sans-serif; 
text-align: center; 
font-weight: bold; 
margin-top: -50px; 
} 

#div_below_nav { 
position: absolute; 
width: 950px; 
height: 300px; 
margin-top: 650px; 
margin-bottom: 50px; 
background-color: red; 
margin-left: 12%; 
}`

來源

2016-03-01 noddy

Divs通常使用'margin：0 auto;'居中。 –

當我這樣做，然後我的div進入屏幕的最左上角。 – noddy

嘗試保證金的左右自動沒有絕對定位 – Pete

絕對定位元件不能與margin: auto特技居中。這是因爲瀏覽器沒有爲他們計算auto的概念。您的div的固定寬度爲950px。您可以利用的是：

#div_below_nav { 
    left: 50%; /* place left edge in the middle of the parent, then... */ 
    margin-left: -475px; /* move it half the div's width to the left again */ 
} 

/* or simulate margin:auto with left/right: */ 
#div_below_nav { 
    left: 0; 
    right: 0; 
}

來源

2016-03-01 13:24:41 Boldewyn

或者你可以使用'left：0'' right：0'，因爲它的寬度是固定的 – Andy

你的先生比我聰明多了:) – noddy

@安迪沒錯，那也行。我會更新答案。 – Boldewyn

margin:auto作品與position:absolute如果設置left:0和right:0

jsfiddle

body { 
 
     width: 100%; 
 
     height: 100vh; 
 
     margin: 0; 
 
} 
 

 
#div_below_nav { 
 
     background: red; 
 
     position: absolute; 
 
     width: 80%; 
 
     height: 50px; 
 
     left: 0; 
 
     right: 0; 
 
     bottom: 50px; 
 
     margin: auto; 
 
}

<div id="div_below_nav">

來源

2016-03-01 13:27:35

謝天謝地，有人知道寬度計算是如何工作的。 – Alohci

您正在使用「的位置是：絕對」，即意味着你的位置是阿瓦絕對是你告訴我的，沒有猜測。

從您的CSS中刪除該行。

如果您想要中心該div標籤，只需在div標籤上方放置一箇中心標籤即可。調試時簡單，高效，易於查看。不要試圖通過只使用CSS來使它變得更加困難，使用你知道的工作，哪些工作正常，哪些容易調試以便將來調試。

<center> 
    <div id="div_below_nav"> 
    </div> 
</center>

CSS

#div_below_nav { 
width: 950px; 
height: 300px; 
margin-top: 650px; 
margin-bottom: 50px; 
background-color: red; 
}

編輯：雖然選擇的答案中，有很多方法可以解決這個問題。一種方法是不要在CSS中使用絕對位置。隨着這條線消失，你可以使用「margin-left：auto」。

這是關於什麼將工作在「標準屏幕尺寸」。這與10年前的答案不一樣，從現在開始的5年不會一樣。我們儘量保持標準並儘可能保持代碼的一般性，以涵蓋許多用戶類型。當使用分辨率絕對值時，記住許多潛在用戶的屏幕尺寸（寬度，高度）是一件好事。

我使用w3schools.com很多，他們總是有很好的答案。以下是當今用戶屏幕尺寸的鏈接：http://www.w3schools.com/browsers/browsers_display.asp

來源

2016-03-01 13:52:51 ejbytes

感謝您的提示！ – noddy

不幸的是，一些像'

'這樣的標籤在html5中不被支持，它的使用必須停止。 –

@ freestock.tk真的嗎？我只是看着，看起來是這樣。這就像Windows在8.1中所做的那樣，他需要一個啓動按鈕，每個人都希望看到平板電腦而不是Windows。他們只是貶低他們想要的任何東西。我讀了原因，這不是一個真正的理由，它只是一個決定。不是每個人都堅持，「如果它沒有損壞，不要修復它」。 – ejbytes

爲什麼我必須輸入「margin-left：12％」來居中我的div？

回答

相關問題