susy 标题栏不居中答案

【问题标题】：susy title bar not centeringsusy 标题栏不居中
【发布时间】：2017-02-23 04:52:58
【问题描述】：

我正在尝试理解 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%);
  }
}

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

如何使标题文本居中并自动计算徽标图像的宽度？我觉得将徽标设置为（12 个中的 3 个）跨度可能会在小屏幕上严重结束。我真的只是希望徽标和标题在标题上彼此相邻，标题垂直居中。

title bar

【问题讨论】：

标签： css sass susy

【解决方案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 获得宽度。

【讨论】：