css - 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

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

我还建议您构建一个您在 jsFiddle 或 CodePen 中尝试的小型版本(针对每个堆栈溢出帖子)

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