SquareSpace 自定义 CSS;标题栏

Question

我是 CSS 的新手，我正在尝试向我的站点添加一些自定义代码。以下是我当前的自定义代码。标题文本是居中的，但是如何让标题文本也垂直居中呢？另外，我已经尝试了 vertical-align: middle; 但那没有做任何事情。任何帮助都会很棒！

.image-slide-title 
 display: block;
 position: relative;height: 100px;
 top: -15px;
 text-align: center;
 opacity: 0;
 background-color: #1E75BB;
 margin-bottom: 0px; 
 -webkit-transition: all 300ms ease-out;  
 -moz-transition: all 300ms ease-out;  
 -o-transition: all 300ms ease-out;  
 -ms-transition: all 300ms ease-out;  
 transition: all 300ms ease-out;
 }

Answer 1

您可以将 padding top 设置为居中对齐或使用 flex 属性或行高。

.image-slide-title{
  height: 100px;
  line-height: 100px;
}

Answer 2

重要的是要注意 CSS 是 CSS 并且它在 SquareSpace 主题中的使用并不重要。 SquareSpace 不使用和特殊的专有风格。

我还建议您构建一个您在 jsFiddle 或 CodePen 中尝试的小型版本（针对每次堆栈溢出 post）

html

<div class="example-area">

  <h2 class="example-text">
    Example text
  </h2>

</div>

CSS

.example-area {
  border: 1px solid red;
  text-align: center;
}

.example-text {
  border: 1px solid blue;
}

.w-padding .example-text {
  padding: 100px 0; / *use padding to create size */
}

.w-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 231px; /* arbitrary example */
}

jsFiddle 示例：https://jsfiddle.net/sheriffderek/d85r37ob/

这完全取决于您在做什么/是否有背景图片 - 大小是否明确等。

请记住，如果您使用 flex-box，则必须为其组织浏览器前缀。我建议 autoprefixr

Answer 3

添加这个而不是垂直对齐

line-height: 100px;

仅此而已！

我在您的代码中注意到一件事，即在 image-slide-title 之后您没有添加 {
所以不要忘记添加它。

SquareSpace 自定义 CSS;标题栏

SquareSpace Custom CSS; Title Block

css

size

block

html

CSS