css - susy 标题栏不居中

Question

我正在尝试理解 scss 并且我正在使用 susy 来创建网格系统。

我的基本设置是:

$susy: (
    columns: 12,
    gutters: 1/4,
    math: fluid,
    output: float,
    gutter-position: inside,

);

我有一些分歧:

#border{
    @include container;
    @include clearfix;
 }

#logo{
    @include span(3 of 12);
 }

 #title{
    @include span(8 of 12);
}

这意味着 Logo 确实出现在左侧，但我无法将标题居中。我厌倦了在分水岭周围画一条边界，看看出了什么问题:

#title{
  position: relative;
  border: 5px solid green;
  h1 {
    color: white;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}

边框是预期的宽度，但只是文本的高度，而不是框的高度。

如何让标题文本居中，并理想地自动计算 Logo 图像的宽度？我觉得将 Logo 设置为(12 个中的 3 个)跨度在小屏幕上可能会很糟糕。我真的只是希望 Logo 和标题在页眉上彼此相邻，标题垂直居中。

title bar

Answer 1

处理垂直居中的最佳方法是使用 flexbox . Flexbox 还将解决您的并排布局。

我不知道你的标记，但像这样:

.banner {
  display: flex;
  align-items: center; // vertical centering

  .logo {
    flex: 0 0 auto; // logo wont flex
  }

  .title {
    flex: 1 1 auto; // title will grow and shrink
  }
}

您可能根本不需要 Susy，但如果您希望 Logo 与网格对齐，则可以将它与 flexbox 一起使用。将 auto 替换为 span(3 of 12)， Logo 将从 Susy 获取其宽度。