0
我想讓綠松石和綠色divs位於紅色div的中心。我試過保證金:0自動,浮動,文本對齊,所有這些都不起作用。div不是水平和垂直居中
turquoise div = header-logo-wrap
green div = header-text-wrap
如何讓這些div在水平和垂直方向上居中?
非常感謝所有幫助,謝謝
@charset "UTF-8";
/* CSS Document */
body{
\t background-color:#F6F7C1; \t
\t padding:0px;
\t margin:0 auto; /* aligns content to touch the edge; gets rid of default spacing/margin between edge and content */
}
/* Header */
#header-wrap{
\t background:#D6ECFF;
\t width:100%;
\t height:auto;
\t border-bottom: 3px solid #CCC;
\t /* margin:0 auto; needed? */
}
#header-top{
\t /* contains logo & title text */
\t background:#F00;
\t width:960px;
\t height:200px;
\t margin:0 auto; /* aligns centrally */
}
.header-text-wrap{
\t width:452px;
\t height:auto;
\t background:#0F0;
\t text-align:justify;
\t float:left;
}
.header-logo-wrap{
\t width:100px;
\t height:100px;
\t background:#0CC;
\t text-align:justify;
\t float:left;
}
#header-bottom{
\t /* contains navigation menu */
\t background:#00F;
\t width:960px;
\t height:50px;
\t margin:0 auto; /* aligns centrally */
\t border-top: 3px solid #CCC;
}
/* Fonts */
header{
\t font-family: Arial, sans-serif, tahoma, Arial, Cambria;
\t -webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
\t font-size:45px;
\t text-transform:uppercase;
\t line-height:40px;
}
slogan{
\t font-family: courier new, tahoma, Arial, Cambria, serif;
\t -webkit-font-smoothing: antialiased; /* subtley makes fonts smoother */
\t font-size:20px;
\t text-transform:uppercase;
\t word-spacing:10px;
\t letter-spacing:5px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- Meta Tags Below -->
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>___________________________</title>
<!-- Google Analytics Code Below -->
<!-- _____________________________ -->
</head>
<body>
<div id="header-wrap">
<div id="header-top">
<div class="header-logo-wrap"></div>
<div class="header-text-wrap">
<header>text goes here & more here
</header>
<slogan>more text goes here</slogan>
</div>
</div>
<div id="header-bottom"></div>
</div>
</body>
</html>
的可能的複製[如何垂直居中對於所有瀏覽器一個div?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a- div-for-all-browsers) – junkfoodjunkie
真的嗎? *指向搜索功能* – junkfoodjunkie
如果我的答案對您有幫助,請將其標記爲最好的。乾杯! –