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);
}

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

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

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

如何使标题文本居中，最好是 auto-calculate 徽标图像的宽度？我觉得将徽标设置为（12 个中的 3 个）跨度在小屏幕上可能会很糟糕。我真的只是希望徽标和标题在 header 上彼此相邻，标题垂直居中。

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，但如果您希望徽标与网格对齐，可以将它与 flexbox 一起使用。将 auto 替换为 span(3 of 12)，徽标将从 Susy 获取其宽度。

susy 标题栏不居中

susy title bar not centering

css

sass

susy