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

Answer 2

您可以将填充顶部设置为对齐居中或使用弹性属性或线高。

---------------------------------------------------------------------------
TypeError                                 Traceback (most recent call last)
pandas/index.pyx in pandas.index.IndexEngine.get_loc (pandas/index.c:4028)()

pandas/src/hashtable_class_helper.pxi in pandas.hashtable.Int64HashTable.get_item (pandas/hashtable.c:8125)()

TypeError: an integer is required

During handling of the above exception, another exception occurred:

KeyError                                  Traceback (most recent call last)
<ipython-input-20-3898742c4378> in <module>()
----> 1 my_df['col_C'] = my_df.apply(lambda row: my_bad_data(row))
      2 asset_df

/usr/local/lib/python3.4/dist-packages/pandas/core/frame.py in apply(self, func, axis, broadcast, raw, reduce, args, **kwds)
   4161                     if reduce is None:
   4162                         reduce = True
-> 4163                     return self._apply_standard(f, axis, reduce=reduce)
   4164             else:
   4165                 return self._apply_broadcast(f, axis)

/usr/local/lib/python3.4/dist-packages/pandas/core/frame.py in _apply_standard(self, func, axis, ignore_failures, reduce)
   4257             try:
   4258                 for i, v in enumerate(series_gen):
-> 4259                     results[i] = func(v)
   4260                     keys.append(v.name)
   4261             except Exception as e:

<ipython-input-20-3898742c4378> in <lambda>(row)
----> 1 asset_df['quality_flag'] = my_df.apply(lambda row: my_bad_data(row))
      2 my_df

<ipython-input-19-2a09810e2dd4> in my_bad_data(row)
      1 def bug_function(row):
----> 2     if row['col_A'] == 'blue':
      3         return 'A_blue'
      4     elif row['col_B'] == 'big':
      5         return 'B_big'

/usr/local/lib/python3.4/dist-packages/pandas/core/series.py in __getitem__(self, key)
    599         key = com._apply_if_callable(key, self)
    600         try:
--> 601             result = self.index.get_value(self, key)
    602 
    603             if not is_scalar(result):

/usr/local/lib/python3.4/dist-packages/pandas/indexes/base.py in get_value(self, series, key)
   2167         try:
   2168             return self._engine.get_value(s, k,
-> 2169                                           tz=getattr(series.dtype, 'tz', None))
   2170         except KeyError as e1:
   2171             if len(self) > 0 and self.inferred_type in ['integer', 'boolean']:

pandas/index.pyx in pandas.index.IndexEngine.get_value (pandas/index.c:3342)()

pandas/index.pyx in pandas.index.IndexEngine.get_value (pandas/index.c:3045)()

pandas/index.pyx in pandas.index.IndexEngine.get_loc (pandas/index.c:4094)()

KeyError: ('col_A', 'occurred at index id')

Answer 3

而不是垂直对齐添加此

line-height: 100px;

那就是全部！

我在你的代码中发现了一件事，即你没有添加{
所以不要忘记添加它。

SquareSpace自定义CSS;标题栏

3 个答案:

HTML

CSS