Question

我不是程序员。而且我觉得这很容易解决，但我似乎无法弄清楚如何去做。

我想这样做（没有比模型更好）：

我有各种各样的问题：

我无法弄清楚如何将所有元素垂直对齐
我想在我的导航中间找到我的徽标，我希望所有这些都以页面为中心
我的两个链接（français并得到报价）我希望他们坚持各自的一面，保证金率为8.33％。
我希望div占据一个空间，但我希望它能在我的英雄形象之上

这是我的HTML（我现在只做一个Under Construction页面，但最终我会在模型中显示我的导航）： mockup: top page

@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&ccedil;ais</p>
        <a href="index.html"><img src="../images/logoMariePierLD.svg" class="logo"></a>
        <p class="quote"> <a href="mailto:hello@mariepierld.ca" 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>&copy; 2017 Marie-Pier LD Design. All Rights Reserved</h6>
  </footer>
</body>

</html>

Answer 1

我认为最直接的方法是使用CSS表。垂直对齐整个中间部分，并以％为单位显示与您的设计匹配的明确宽度。
希望这有助于您入门！

＆＃13;

.verticallyAlign {
  display: table;
  width: 100%;
}

.verticallyAlign > div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 12%;
}

.verticallyAlign > :first-child,
.verticallyAlign > :last-child {
  width: 20%
}

＆＃13;

<div class="wrapper">
  <div class="verticallyAlign">
    <div class="french">fran&ccedil;ais</div>
    <div>about me</div>
    <div>services</div>
    <div>
      <a href="index.html"><img src="http://placehold.it/100x100" class="logo"></a>
    </div>
    <div>goodies</div>
    <div>say hello</div>
    <div class="quote"> <a href="mailto:hello@mariepierld.ca" class="white">get a quote</a></div>
  </div>
</div>

＆＃13;

我希望将我的徽标居中并将导航并排放置，所有内容都垂直对齐

1 个答案: