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

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

如何将标题文字居中，理想情况下自动计算徽标图像的宽度？我觉得将徽标设置为（3个中的12个）跨度可能会在小屏幕上结束。我真的只想让标题和标题在标题上彼此相邻，标题垂直居中。

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标题栏不居中

1 个答案: