div中的居中div

我是初學者級別的網頁設計師。這個問題可能已經被問到了，但我也提到了答案，但他們沒有幫助。我的問題是我有div稱爲「標題」和3 012這個div裏面的div。這些未與父母div中的中心對齊。我已經嘗試了很多答案，但他們不工作。div中的居中div

這裏是我的代碼：

#header { 
    height: 176px; 
    text-align: center; 
    position: absolute; 
     } 
    #header div { 
    display: inline; 
    text-align: center; 
    margin: auto; 
    float: left; 
    position: relative; 

} 

#logo { 
    height: 156px; 
    width: 218px; 
    background-image: url(../images/logo_03.jpg); 


} 

#tagline { 
    width: 250px; 


} 
#badge { 
    width: 300px; 


}

這裏是HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ebhar media</title> 
<style type="text/css"> 
</style> 
<link href="style/homestyle.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
body { 

    min-width:1407px; 
} 
</style> 
</head> 

<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px"> 
<div id="base"> 
    <div id="header" align="center"> 
    <div id="logo"></div> 
    <div id="tagline">YOUR SUCESS IS OUR SUCESS</div> 
    <div id="badge">Content for id "badge" Goes Here</div> 
    </div> 
    <div id="navbar">Content for id "navbar" Goes Here</div> 
</div> 
</body> 
</html>

來源

2013-06-05 sam

您還需要向我們展示您的HTML標題，以及您真正想要看到的內容。 – KaraokeStu

一個可能的問題是你的'＃頭部'由於'position：absolute'而失去了它的全部寬度'' - 如果你給它'寬度：100％會發生什麼？' – xec

@KaraokeStu我已經添加了html代碼 – sam

從#header刪除position:absolute從#header div

#header { 
    height: 176px; 
    text-align: center; 
/* position: absolute;*/ 
} 
#header div { 
    display: inline; 
    text-align: center; 
    margin: auto; 
/* float: left; 
    position: relative;*/ 
}

我認爲日刪除position:relative，float:left是會解決你的問題。

演示：http://jsfiddle.net/UYWqt/

來源

2013-06-05 09:01:53

是的，這看起來很合理。我相信'#header div'上的'text-align：center;'和'margin：auto;'也是多餘的。 – xec

但這沒有解決問題 – sam

檢查jsFiddle鏈接 http://jsfiddle.net/UYWqt/ –

以下應爲你工作：

#header { 
    height: 176px; 
    width: 100%; 
} 

#header div { margin: auto; } 

#logo { 
    height: 156px; 
    width: 218px; 
    background-image: url(../images/logo_03.jpg); 
} 

#tagline { 
    width: 250px; 
} 
#badge { 
    width: 300px; 
}

來源

2013-06-05 09:17:17 KaraokeStu

你可以簡單地增加一些屬性上的DIV 嘗試這樣的事情

<div align="center"> 
    <div></div> 
</div>

來源

2013-06-05 10:18:21 edd

這就是你確切需要？

http://jsfiddle.net/nJqfn/

對未來的一些言論 - 不要使用

<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">.

最好是包括normalize.css或reset.css跨瀏覽器視圖。
這是

<div id="header" align="center">

還不錯啊。嘗試分離視圖和代碼。

來源

2013-06-05 11:38:30 LadyBo

div中的居中div

回答

相關問題