文章标签

Vincent De Oliveira 撰写了一篇精彩的博文，详细介绍了您可能想知道的关于line-height和vertical-align属性的几乎所有内容。如果您曾经遇到过将内容与文本对齐的问题，或者想知道为什么两种字体……

在 CSS 中居中内容是 CSS 抱怨的典型代表。为什么它必须如此困难？ 他们嘲笑。我认为问题不在于它难以实现，而在于有太多不同的方法……

在网页设计中居中内容时，您掌握的关于被居中元素及其父元素的信息越多，操作就越容易。那么，如果您一无所知呢？它仍然有点可行……

CSS 中的vertical-align属性控制着在一行上并排设置的元素的对齐方式。

img {
  vertical-align: middle;
}

为了使此功能生效，元素需要沿着基线设置。作为……

CSS 背景图像技巧

html { 
   width:100%; 
   height:100%; 
   background:url(logo.png) center center no-repeat;
}

CSS + 内联图像技巧

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half 

如果您只有一个单词或一行文本，则有一种巧妙的方法可以使用 CSS 将其垂直居中在一个块中。您将该文本的行高设置为等于高度……

CSS 具有一个名为垂直对齐的属性。当您第一次了解它时，它可能有点令人困惑，因此我认为我们可以帮助解释它的用途和一些用例。

基本用法如下……