css common notes

css vertical center

Use Flexbox layout: set the parent element to display: flex and use the align-items: center attribute. This will center the child element vertically within the parent element.

.parent {
  display: flex;
  align-items: center;
}

Use table layout: Set the display attribute of the parent element to table, the display attribute of the child element to table-cell, and use the vertical-align: middle attribute.

.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}

Use absolute positioning and transform attributes: Set the position attribute of the child element to absolute, and use top: 50% and transform: translateY(-50%) attributes.

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

These methods can select the appropriate method according to the specific situation to achieve the vertical centering effect.

css font spacing

In CSS, you can use letter-spacingproperties to control the spacing of text. It can accept a length value indicating the size of the space between each letter. You can also use negative values to reduce the spacing between letters.

Here is an example:

p {
  letter-spacing: 2px;
}

In the example above, pthe text within the element will have 2 pixels added between each letter.

In addition to letter-spacingattributes, you can also use word-spacingattributes to control the spacing between words. Its usage is similar to letter-spacing.

p {
  word-spacing: 5px;
}

In the example above, pthe text within the element will have 5 pixels of space added between each word.

Hope this helps! If you have more questions, please feel free to ask.

Guess you like