divsは水平方向と垂直方向に重ならない

赤いdivの中央にターコイズと緑のdivを作成したいと思います。 Iveはマージンを試しました：0 auto、floating、text align、動作しないすべて。divsは水平方向と垂直方向に重ならない

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 &amp; more here 
 
</header> 
 
<slogan>more text goes here</slogan> 
 
</div> 
 
</div> 
 
<div id="header-bottom"></div> 
 

 
</div> 
 
</body> 
 
</html>

出典

2017-01-03 user3760941

の可能性のある重複した[縦にすべてのブラウザのためのdivを中央揃えする方法？]（http://stackoverflow.com/questions/396145/how-to-vertically-center-a- div-for-all-browsers） – junkfoodjunkie

本当ですか？ *検索機能を指している* – junkfoodjunkie

私の答えがあなたに役立つなら、それを最高のものとしてマークしてください。乾杯！ –

使用flexポジショニングお願いします。

@charset "UTF-8"; 
 

 
/* CSS Document */ 
 

 
body { 
 
    background-color: #F6F7C1; 
 
    padding: 0px; 
 
    margin: 0 auto; 
 
    /* aligns content to touch the edge; gets rid of default spacing/margin between edge and content */ 
 
} 
 
/* Header */ 
 

 
#header-wrap { 
 
    background: #D6ECFF; 
 
    width: 100%; 
 
    height: auto; 
 
    border-bottom: 3px solid #CCC; 
 
    /* margin:0 auto; needed? */ 
 
} 
 
#header-top { 
 
    /* contains logo & title text */ 
 
    background: #F00; 
 
    width: 100%; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    /* aligns centrally */ 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.header-text-wrap { 
 
    width: 452px; 
 
    height: auto; 
 
    background: #0F0; 
 
    text-align: justify; 
 
    float: left; 
 
} 
 
.header-logo-wrap { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #0CC; 
 
    text-align: justify; 
 
    float: left; 
 
} 
 
#header-bottom { 
 
    /* contains navigation menu */ 
 
    background: #00F; 
 
    width: 100%; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    /* aligns centrally */ 
 
    border-top: 3px solid #CCC; 
 
} 
 
/* Fonts */ 
 

 
header { 
 
    font-family: Arial, sans-serif, tahoma, Arial, Cambria; 
 
    -webkit-font-smoothing: antialiased; 
 
    /* subtley makes fonts smoother */ 
 
    font-size: 45px; 
 
    text-transform: uppercase; 
 
    line-height: 40px; 
 
} 
 
slogan { 
 
    font-family: courier new, tahoma, Arial, Cambria, serif; 
 
    -webkit-font-smoothing: antialiased; 
 
    /* subtley makes fonts smoother */ 
 
    font-size: 20px; 
 
    text-transform: uppercase; 
 
    word-spacing: 10px; 
 
    letter-spacing: 5px; 
 
}

<div id="header-wrap"> 
 

 
    <div id="header-top"> 
 
    <div class="header-logo-wrap"></div> 
 

 
    <div class="header-text-wrap"> 
 
     <header>text goes here &amp; more here 
 
     </header> 
 
     <slogan>more text goes here</slogan> 
 
    </div> 
 

 
    </div> 
 
    <div id="header-bottom"></div>

出典

2017-01-03 01:07:42

あなたはそれらを水平方向の中央にする、とのdivは垂直方向に中央揃えにするために、コンテナを包むためdisplay: table-cellを作るためにこれらのdiv display: inline-blockを作成する必要があります。

@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 */ 
 
    display: table-cell; 
 
\t background:#F00; 
 
\t width:960px; 
 
\t height:200px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 
.header-text-wrap{ 
 
    display: inline-block; 
 
\t width:452px; 
 
\t background:#0F0; 
 
\t text-align: center; 
 
    margin: 0; 
 
} 
 
.header-logo-wrap{ 
 
    display: inline-block; 
 
\t width:100px; 
 
\t height:100px; 
 
\t background:#0CC; 
 
\t text-align: center; 
 
} 
 
#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 &amp; more here 
 
</header> 
 
<slogan>more text goes here</slogan> 
 
</div> 
 
</div> 
 
<div id="header-bottom"></div> 
 

 
</div> 
 
</body> 
 
</html>

出典

2017-01-03 06:01:41 Banzay

divsは水平方向と垂直方向に重ならない

答えて

関連する問題