0
私はプログラマーではありません。そして、私はそれは簡単な修正だと感じていますが、私はそれを行う方法を理解できないようです。私は自分のロゴを中央に並べ、ナビゲーションを横に並べて、すべて垂直に整列させたい
私はこの（モックアップに勝るもの）を行いませんしたい：
私は問題のすべての並べ替えがあります
- を私はすべての私を取得する方法を見つけ出すことはできません要素が垂直に整列する
- 私は自分のナビゲーションの途中でロゴを欲しがっており、そのすべてをページの中央に入れたい
- 私の2つのリンク（fra私は彼らに8.33％のマージンで、それぞれの側面に固執して欲しい。ここに私のHTMLは、（私は今だけのために建設中のページをやっているのですが、結局、私は」私はdivのスペースを占有することにしたいが、私はそれは私のヒーローのイメージ
の上になりたい
@charset "UTF-8";
/* CSS Document */
/* Simplify width and height calculations */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/*general*/
body,
html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-color: #FF4612;
}
body {
color: #262524;
font-family: "azo-sans-web", sans-serif;
font-size: 100%;
font-weight: 700;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
article,
section,
aside,
main {
padding: 0;
margin: 0;
}
a {
color: #F04A24;
}
p .white {
color: white;
}
h1 {
text-align: center;
font-size: 2.25em;
}
h6 {
font-size: 0.875em;
color: white;
text-align: center;
}
p {
font-size: 1.125em;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -6.625em;
width: 100%;
}
.wrapper header {
padding: 1em 0;
vertical-align: middle;
width: 100%;
position: relative;
}
.wrapper header .french {
margin-left: 8.33333%;
color: white;
display: inline-block;
float: left;
}
.wrapper header .quote {
margin-right: 8.33333%;
display: inline-block;
float: right;
}
.logo {
margin: 0 auto;
width: 6.25em;
display: inline-block;
}
.hero {
height: 75vh;
position: relative;
}
.hero-text {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
margin-right: 50%;
padding: 0 8.33%;
width: 100%;
}
.hero.center {
overflow: hidden;
width: 100%;
}
.hero-image {
width: auto;
height: 100%;
position: absolute;
top: 50%;
transform: translate(0, -50%);
min-width: 100%;
min-height: 100%;
}
.hero.center .hero-text {
color: white;
text-align: center;
}
.footer {
padding: 1em;
background-color: #060E9F;
}
.footer,
.push {
height: 6.625em;
width: 100%;
}
.social {
width: 1.5em;
margin-top: 0;
margin-right: 0.25em;
margin-left: 0.25em;
margin-bottom: 1em;
height: auto;
}
body footer div {
text-align: center;
}
@media (min-width: 834px) {
.hero-image {
width: 100%;
height: auto;
}
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>MARIE-PIER LD | Freelance Graphic Designer Ottawa</title>
<meta name="description" content="Description goes here">
<link href="../css/responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.typekit.net/fpr3kdi.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
</head>
<body>
<div class="wrapper">
<div class="verticallyAlign">
<header>
<p class="french">français</p>
<a href="index.html"><img src="../images/logoMariePierLD.svg" class="logo"></a>
<p class="quote"> <a href="mailto:[email protected]" class="white">say hello </a></p>
</header>
</div>
<main>
<div class="hero center">
<!-- image goes here -->
<img src="../images/heroUnderConstruction.jpg" alt="" class="hero-image" />
<div class="hero-text">
<h1>dammit. we’re under renovation.</h1>
<p>and you know how it is... always longer than expected.<br> in the meantime, check out my <a href="https://www.behance.net/mariepierld" class="white">portfolio.</a><br>
<br> see you soon pal!</p>
</div>
</div>
</main>
<div class="push"></div>
</div>
<footer class="footer">
<div>
<a href="https://www.facebook.com/mariepierld.design/" target="_blank"><img src="../images/facebook.svg" alt="Marie-Pier LD Design | Facebook Page" class="social"></a>
<a href="https://www.instagram.com/mariepierld_/" target="_blank"><img src="../images/instagram.svg" alt="Marie-Pier LD | Instagram" class="social"></a>
<a href="https://www.behance.net/mariepierld" target="_blank"><img src="../images/behance.svg" alt="Marie-Pier Drolet | Online Portfolio" class="social"></a>
<a href="https://www.linkedin.com/in/mariepierld/" target="_blank"><img src="../images/linkedIn.svg" alt="Marie-Pier Drolet | LinkedIn" class="social"></a>
</div>
<h6>© 2017 Marie-Pier LD Design. All Rights Reserved</h6>
</footer>
</body>
</html>
私はスニペットを使ってあなたの質問を更新しましたが、何も表示傾ける、ライブデモを提供したり、我々はこの問題を解決するためにあなたを助けることができる良い例を表示するには、このスニペットを編集してください。 – Pedram
@pedramそれは終わった！スニペットで更新しました –