为什么我的内容没有垂直对齐？ （Flex、CSS3）

问题描述 投票：0回答：1

我想使用 Flex 垂直对齐 row menu 和 row content 中的项目，但我似乎无法让代码正常工作。两个类都具有正确的高度，我也是通过使用 Flex 实现的。

希望任何人都可以帮助我。我已经尝试让课程内容垂直对齐（不使用表格）两天了。

默伦

/* Appearance */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  color: #fff;
  font-family: 'Lato', sans-serif;
  text-align: center;
  background: #5e129f;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNWUxMjlmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk2MDAzMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -moz-linear-gradient(-45deg, #5e129f 0%, #960030 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #5e129f), color-stop(100%, #960030));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #5e129f 0%, #960030 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #5e129f 0%, #960030 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #5e129f 0%, #960030 100%);
  /* IE10+ */
  background: linear-gradient(135deg, #5e129f 0%, #960030 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5e129f', endColorstr='#960030', GradientType=1);
  /* IE6-8 fallback on horizontal gradient */
}
nav {
  float: right;
  margin-left: 2em;
}
h1 {
  color: #FFF;
}
.button.one {
  background: transparent;
  border: 0.0625em solid #5E129F;
  /* 1/16 */
}
.button.two {
  background-color: #5E129F;
}
#brand {
  float: left;
  margin-right: 2em;
}
.container {
  display: flex;
  height: 100%;
  flex-flow: column nowrap;
}
.row.menu {
  flex: 1;
  justify-content: center;
}
.row.content {
  flex: 11;
  justify-content: center;
}

/* ignore - foundation stylesheet */

button,
.button {
  border-style: solid;
  border-width: 0;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: normal;
  line-height: normal;
  margin: 0 0 1.25rem;
  position: relative;
  text-decoration: none;
  text-align: center;
  -webkit-appearance: none;
  border-radius: 0;
  display: inline-block;
  padding-top: 1rem;
  padding-right: 2rem;
  padding-bottom: 1.0625rem;
  padding-left: 2rem;
  font-size: 1rem;
  background-color: #2ba6cb;
  border-color: #2285a2;
  color: #FFFFFF;
  transition: background-color 300ms ease-out;
}
button:hover,
button:focus,
.button:hover,
.button:focus {
  background-color: #2285a2;
}
button:hover,
button:focus,
.button:hover,
.button:focus {
  color: #FFFFFF;
}
button.secondary,
.button.secondary {
  background-color: #e9e9e9;
  border-color: #bababa;
  color: #333333;
}
button.secondary:hover,
button.secondary:focus,
.button.secondary:hover,
.button.secondary:focus {
  background-color: #bababa;
}
button.secondary:hover,
button.secondary:focus,
.button.secondary:hover,
.button.secondary:focus {
  color: #333333;
}
button.success,
.button.success {
  background-color: #5da423;
  border-color: #4a831c;
  color: #FFFFFF;
}
button.success:hover,
button.success:focus,
.button.success:hover,
.button.success:focus {
  background-color: #4a831c;
}
button.success:hover,
button.success:focus,
.button.success:hover,
.button.success:focus {
  color: #FFFFFF;
}
button.alert,
.button.alert {
  background-color: #c60f13;
  border-color: #9e0c0f;
  color: #FFFFFF;
}
button.alert:hover,
button.alert:focus,
.button.alert:hover,
.button.alert:focus {
  background-color: #9e0c0f;
}
button.alert:hover,
button.alert:focus,
.button.alert:hover,
.button.alert:focus {
  color: #FFFFFF;
}
button.warning,
.button.warning {
  background-color: #f08a24;
  border-color: #cf6e0e;
  color: #FFFFFF;
}
button.warning:hover,
button.warning:focus,
.button.warning:hover,
.button.warning:focus {
  background-color: #cf6e0e;
}
button.warning:hover,
button.warning:focus,
.button.warning:hover,
.button.warning:focus {
  color: #FFFFFF;
}
button.info,
.button.info {
  background-color: #a0d3e8;
  border-color: #61b6d9;
  color: #333333;
}
button.info:hover,
button.info:focus,
.button.info:hover,
.button.info:focus {
  background-color: #61b6d9;
}
button.info:hover,
button.info:focus,
.button.info:hover,
.button.info:focus {
  color: #FFFFFF;
}
button.large,
.button.large {
  padding-top: 1.125rem;
  padding-right: 2.25rem;
  padding-bottom: 1.1875rem;
  padding-left: 2.25rem;
  font-size: 1.25rem;
}
button.small,
.button.small {
  padding-top: 0.875rem;
  padding-right: 1.75rem;
  padding-bottom: 0.9375rem;
  padding-left: 1.75rem;
  font-size: 0.8125rem;
}
button.tiny,
.button.tiny {
  padding-top: 0.625rem;
  padding-right: 1.25rem;
  padding-bottom: 0.6875rem;
  padding-left: 1.25rem;
  font-size: 0.6875rem;
}
button.expand,
.button.expand {
  padding-right: 0;
  padding-left: 0;
  width: 100%;
}
button.left-align,
.button.left-align {
  text-align: left;
  text-indent: 0.75rem;
}
button.right-align,
.button.right-align {
  text-align: right;
  padding-right: 0.75rem;
}
button.radius,
.button.radius {
  border-radius: 3px;
}
button.round,
.button.round {
  border-radius: 1000px;
}
button.disabled,
button[disabled],
.button.disabled,
.button[disabled] {
  background-color: #2ba6cb;
  border-color: #2285a2;
  color: #FFFFFF;
  cursor: default;
  opacity: 0.7;
  box-shadow: none;
}
button.disabled:hover,
button.disabled:focus,
button[disabled]:hover,
button[disabled]:focus,
.button.disabled:hover,
.button.disabled:focus,
.button[disabled]:hover,
.button[disabled]:focus {
  background-color: #2285a2;
}
button.disabled:hover,
button.disabled:focus,
button[disabled]:hover,
button[disabled]:focus,
.button.disabled:hover,
.button.disabled:focus,
.button[disabled]:hover,
.button[disabled]:focus {
  color: #FFFFFF;
}
button.disabled:hover,
button.disabled:focus,
button[disabled]:hover,
button[disabled]:focus,
.button.disabled:hover,
.button.disabled:focus,
.button[disabled]:hover,
.button[disabled]:focus {
  background-color: #2ba6cb;
}
button.disabled.secondary,
button[disabled].secondary,
.button.disabled.secondary,
.button[disabled].secondary {
  background-color: #e9e9e9;
  border-color: #bababa;
  color: #333333;
  cursor: default;
  opacity: 0.7;
  box-shadow: none;
}
button.disabled.secondary:hover,
button.disabled.secondary:focus,
button[disabled].secondary:hover,
button[disabled].secondary:focus,
.button.disabled.secondary:hover,
.button.disabled.secondary:focus,
.button[disabled].secondary:hover,
.button[disabled].secondary:focus {
  background-color: #bababa;
}
button.disabled.secondary:hover,
button.disabled.secondary:focus,
button[disabled].secondary:hover,
button[disabled].secondary:focus,
.button.disabled.secondary:hover,
.button.disabled.secondary:focus,
.button[disabled].secondary:hover,
.button[disabled].secondary:focus {
  color: #333333;
}
button.disabled.secondary:hover,
button.disabled.secondary:focus,
button[disabled].secondary:hover,
button[disabled].secondary:focus,
.button.disabled.secondary:hover,
.button.disabled.secondary:focus,
.button[disabled].secondary:hover,
.button[disabled].secondary:focus {
  background-color: #e9e9e9;
}
button.disabled.success,
button[disabled].success,
.button.disabled.success,
.button[disabled].success {
  background-color: #5da423;
  border-color: #4a831c;
  color: #FFFFFF;
  cursor: default;
  opacity: 0.7;
  box-shadow: none;
}
button.disabled.success:hover,
button.disabled.success:focus,
button[disabled].success:hover,
button[disabled].success:focus,
.button.disabled.success:hover,
.button.disabled.success:focus,
.button[disabled].success:hover,
.button[disabled].success:focus {
  background-color: #4a831c;
}
button.disabled.success:hover,
button.disabled.success:focus,
button[disabled].success:hover,
button[disabled].success:focus,
.button.disabled.success:hover,
.button.disabled.success:focus,
.button[disabled].success:hover,
.button[disabled].success:focus {
  color: #FFFFFF;
}
button.disabled.success:hover,
button.disabled.success:focus,
button[disabled].success:hover,
button[disabled].success:focus,
.button.disabled.success:hover,
.button.disabled.success:focus,
.button[disabled].success:hover,
.button[disabled].success:focus {
  background-color: #5da423;
}
button.disabled.alert,
button[disabled].alert,
.button.disabled.alert,
.button[disabled].alert {
  background-color: #c60f13;
  border-color: #9e0c0f;
  color: #FFFFFF;
  cursor: default;
  opacity: 0.7;
  box-shadow: none;
}
button.disabled.alert:hover,
button.disabled.alert:focus,
button[disabled].alert:hover,
button[disabled].alert:focus,
.button.disabled.alert:hover,
.button.disabled.alert:focus,
.button[disabled].alert:hover,
.button[disabled].alert:focus {
  background-color: #9e0c0f;
}
button.disabled.alert:hover,
button.disabled.alert:focus,
button[disabled].alert:hover,
button[disabled].alert:focus,
.button.disabled.alert:hover,
.button.disabled.alert:focus,
.button[disabled].alert:hover,
.button[disabled].alert:focus {
  color: #FFFFFF;
}
button.disabled.alert:hover,
button.disabled.alert:focus,
button[disabled].alert:hover,
button[disabled].alert:focus,
.button.disabled.alert:hover,
.button.disabled.alert:focus,
.button[disabled].alert:hover,
.button[disabled].alert:focus {
  background-color: #c60f13;
}
button.disabled.warning,
button[disabled].warning,
.button.disabled.warning,
.button[disabled].warning {
  background-color: #f08a24;
  border-color: #cf6e0e;
  color: #FFFFFF;
  cursor: default;
  opacity: 0.7;
  box-shadow: none;
}
button.disabled.warning:hover,
button.disabled.warning:focus,
button[disabled].warning:hover,
button[disabled].warning:focus,
.button.disabled.warning:hover,
.button.disabled.warning:focus,
.button[disabled].warning:hover,
.button[disabled].warning:focus {
  background-color: #cf6e0e;
}
button.disabled.warning:hover,
button.disabled.warning:focus,
button[disabled].warning:hover,
button[disabled].warning:focus,
.button.disabled.warning:hover,
.button.disabled.warning:focus,
.button[disabled].warning:hover,
.button[disabled].warning:focus {
  color: #FFFFFF;
}
button.disabled.warning:hover,
button.disabled.warning:focus,
button[disabled].warning:hover,
button[disabled].warning:focus,
.button.disabled.warning:hover,
.button.disabled.warning:focus,
.button[disabled].warning:hover,
.button[disabled].warning:focus {
  background-color: #f08a24;
}
button.disabled.info,
button[disabled].info,
.button.disabled.info,
.button[disabled].info {
  background-color: #a0d3e8;
  border-color: #61b6d9;
  color: #333333;
  cursor: default;
  opacity: 0.7;
  box-shadow: none;
}
button.disabled.info:hover,
button.disabled.info:focus,
button[disabled].info:hover,
button[disabled].info:focus,
.button.disabled.info:hover,
.button.disabled.info:focus,
.button[disabled].info:hover,
.button[disabled].info:focus {
  background-color: #61b6d9;
}
button.disabled.info:hover,
button.disabled.info:focus,
button[disabled].info:hover,
button[disabled].info:focus,
.button.disabled.info:hover,
.button.disabled.info:focus,
.button[disabled].info:hover,
.button[disabled].info:focus {
  color: #FFFFFF;
}
button.disabled.info:hover,
button.disabled.info:focus,
button[disabled].info:hover,
button[disabled].info:focus,
.button.disabled.info:hover,
.button.disabled.info:focus,
.button[disabled].info:hover,
.button[disabled].info:focus {
  background-color: #a0d3e8;
}
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flexbox test</title>
  <!-- Flexbox-->
  <link href="css/flexbox.css" rel="stylesheet">
  <link href="css/foundation.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
  <div class="container">
    <div class="row menu">
      <div class="small-12 small-centered columns">
        <div id="brand">
          Creative Aid
        </div>
        <nav>
          Link1 Link2 Link3
        </nav>
      </div>
    </div>
    <div class="row content">
      <div class="small-12 small-centered columns">
        <h1>Title</h1>
        <p>Insert your text here.</p>
        <a href="#" class="button small">Small Button</a>
        <a href="#" class="button small">Small Button</a>
      </div>
    </div>
  </div>


</body>

</html>

html css zurb-foundation flexbox
1个回答
0
投票

修好了！对于任何对解决方案感兴趣的人：

https://github.com/PaulSpr/jQuery-Flex-Vertical-Center

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.