Question

我试图编写一个简单的下载页面，但我无法得到我想要的内容。

一张图片胜过千言万语，所以我勾勒出了我想要得到的东西：

现在，我想出了如何：

将盒子固定在底部，而
保持页面可滚动

但是我无法理解如何使标题和按钮在不同的方面对齐，以及＆＃34;页脚的内容＆＃34;垂直对齐......

这是实际的＆＃34;代码＆＃34; ...

＆＃13;

* {
  padding: 0;
  margin: 0;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  position: relative;
  margin: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: #fff;
}

::-webkit-scrollbar-thumb {
  background-color: #222;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  background: #fff;
  color: #222;
  font-family: "Gotham SSm A";
  text-align: center;
  display: table;
  margin: auto;
}

p {
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
  margin: auto;
  left: 0;
}

a {
  transition: 0.2s all;
  text-decoration: none;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  font-family: "Gotham SSm A";
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  background: #fff;
  color: #222;
  border-radius: 2px;
  border: 0;
}

.button:hover,
.button:focus {
  color: #fff;
  background: #F9BF3B;
}

.download {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 1%;
  min-height: 50px;
  height: 15%;
  width: 100%;
  background: #fafafa;
  box-shadow: 0 0 15px 0 rgba(153, 153, 153, 0.5);
}

.left, .right {
  display: inline-block;
}

＆＃13;

<div class="download">
  <div class="left">
    <p>left-aligned text</p>
  </div>

  <div class="right">
    <a href="#" class="button">button</a>
  </div>
</div>

＆＃13;

Answer 1

使用Preprocessors 进行编织：http://kodeweave.sourceforge.net/editor/#6a3f265ea39a9e4c296718eb64e08ecf
编织： http://kodeweave.sourceforge.net/editor/#b3ebebb74666da608e8d8a19f2a1690d

始终尝试保留代码DRY！

考虑到你的新手，我在回答你的问题之前要指出一些事情。（但首先结帐Common CSS questions）

您的代码中存在一些错误，请记住......
众所周知，通用选择器*很慢（仅在绝对必要时使用它，因此最好尽量避免使用它）。 注意：默认情况下，html和body标签都有width 100%。

你应该总是在你的项目中使用一个好的CSS重置库（Normalize是我个人最喜欢的）。这样可以节省您在其他浏览器上使用元素样式的大部分麻烦至于CSS3，你需要Prefix-free或Autoprefixer来......

摆脱CSS前缀地狱！

说完了。

我做的第一件事就是专注于将页脚内容集中在一起。

在这种情况下，使用margin，translate，position relative＆amp; top将文字垂直居中是不好的做法。（使用它的唯一相关原因是，如果按钮上的字体|| font-size与默认文本不同，但在这种情况下，它并非如此，请使用它！（记住{ {3}}）

要垂直对齐文字，您可以使用 DRY ， display table 和 display table-cell < / p>

在这种情况下，最好使用vertical-align middle代替text-align。

使用float和display table表示。 positioning the footer at the bottom 我能够减轻see code，clear和margin的不必要用途。

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Montserrat');
html, body {
  height: 100%;
}

/* Content Padding */
.content {
  padding: 1em;
}

/* Position and Style Footer */
.download {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 1em;
  background: #fff;
  box-shadow: 0 0 1.056em rgba(0, 0, 0, 0.5);
}
/* Footer Typography */
.download, .button {
  font-family: "Montserrat";
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  text-decoration: none;
}
/* Margin Button to Center */
.button {
  color: #000;
  padding: 10px 22px;
  border-radius: 0.4em;
  transition: all .2s ease;
}
.button:hover {
  color: #fff;
  background: #F9BF3B;
}

/* Vertically Align Content */
.table {
  display: table;
  width: 100%;
  height: 100px;
}
.cell {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
}

/* Variable Classes */
.left {
  text-align: left;
}
.right {
  text-align: right;
}

/* Styles Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  position: relative;
  margin: 5px;
}
::-webkit-scrollbar-track {
  box-shadow: #fff;
}
::-webkit-scrollbar-thumb {
  background-color: #222;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

＆＃13;

<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/>
<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa praesentium velit quas esse itaque voluptate eos alias deserunt veniam, molestias exercitationem, maiores sed et vitae, iusto autem cum eaque? Maxime.</p>
  <p>Rerum, tempore, debitis! Ducimus perferendis qui doloribus ab, deleniti error cumque eaque consequatur soluta. Quidem incidunt, commodi qui soluta sed aut suscipit, nisi dolore. Tempora ipsa ut quod ipsum autem!</p>
  <p>Illo nisi eos quam neque adipisci a id autem sed distinctio, recusandae iure rem maiores, facere fugiat, harum sit reprehenderit dignissimos quaerat ut. Necessitatibus iure, suscipit blanditiis ipsum consectetur! Illum!</p>
  <p>Magnam autem dicta architecto necessitatibus accusamus expedita, at, accusantium nobis dolorem repellat vero earum beatae sunt iusto aut veritatis numquam deserunt blanditiis officia nihil! Ad, amet consectetur maiores quia earum?</p>
  <p>Nisi libero voluptatibus modi facere laboriosam ex provident. Quae dolorem tempore rem quia voluptate nisi consequuntur rerum earum fugiat neque, aperiam, iste culpa deserunt eligendi eos aspernatur ex harum ea.</p>
  <p>Adipisci, itaque ullam! Quis culpa tempora sunt dignissimos eaque porro laudantium excepturi, fugit quasi ex dolor repellendus neque magnam repellat fuga aliquid odio, veniam dicta cumque, laborum placeat rem commodi.</p>
  <p>Ad sunt optio nostrum, distinctio repellendus dignissimos, cum aut quos sed excepturi, nulla qui molestias? Ad quia, eligendi! Quam facilis consequatur laboriosam, adipisci et. Debitis ea facere ullam iure repellendus?</p>
  <p>Laborum, distinctio necessitatibus. Odit voluptatem fugit sint voluptates rem distinctio animi nihil beatae, molestiae explicabo tempora vero quam! Quidem autem itaque eos ratione voluptatum veritatis eveniet vitae aperiam aut voluptates?</p>
  <p>Soluta eos tempore, eum ducimus pariatur repellendus quaerat praesentium laudantium? Molestias laborum odio ratione temporibus rem id, excepturi magnam delectus facilis quibusdam quaerat exercitationem veniam vero architecto provident dolore sed.</p>
  <p>Quia, debitis odit obcaecati mollitia sunt enim natus ipsum, beatae corporis laborum id provident velit laudantium eveniet, fugiat. Velit minus ipsum nihil nemo, eos vero, soluta quos ab accusamus obcaecati.</p>
  <p>Nam quis, esse iure aliquid? Rem temporibus nemo aspernatur cupiditate accusamus, explicabo totam laboriosam odit magni quaerat maxime culpa vitae! Repellat velit quos eaque temporibus, tempore neque odio ex deserunt?</p>
  <p>Eveniet, unde quas debitis rem laboriosam cumque praesentium animi veniam temporibus ullam ipsam modi minima iusto repellat, tenetur reiciendis dolorum, officia dolor possimus. Esse quidem vitae perspiciatis velit a fuga.</p>
</div>

<div class="table">
  <div class="download">
    <div class="cell left">
      <p>left-aligned text</p>
    </div>

    <div class="cell right">
      <a class="button" href="javascript:void(0)">button</a>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我所要做的只是将display:inline换成这个：

.left {
float:left;
margin-top:13px; 
}

.right {
float:right;
}

添加margin-top:13px;以垂直对齐

Here's一堆Hi（小提琴）

对齐固定页脚中的内容

2 个答案: