Question

我需要的是垂直对齐文本。我将display：table添加到图像中，但这会使图像缩短1px。为了表明我的意思，我将display：table添加到悬停状态，这样你就可以看到会发生什么。为什么会这样？

＆＃13;

.wrapper {
  margin: 0 auto;
  max-width: 940px;
  background: #EBEBEB;
}
.border {
  border-radius: 4px;
}
.ideas__gallery div {
  margin: 10px;
}
.ideas__gallery__h4 {
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  font-size: 22px;
  line-height: 1.2em;
  padding: 0;
  margin: 0;
}
.one:hover .ideas__gallery__h4 {
  color: #ff5b5d;
  transition: all 0.2s ease-in;
}
.one:hover,
.two:hover,
.three:hover,
.four:hover,
.five:hover,
.six:hover {
  display: table;
}
.ideas__gallery__h3 {
  color: #333;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  margin-bottom: 34px;
}
.one {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://carwallstar.com/wp-content/uploads/2014/11/ford-car-images2015-ford-mustang--2015-ford-mustang-29-----froggpondcom-w8lqchv6.jpg') 100% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.two {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://www.jdpower.com/sites/default/files/legacy_files/pictures/j/jdpower/0981/d6be82ef8f0dfc684d7aed8755d13dcbx.jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.three {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://cdn.corlate.co/2015/08/04/fordmustangsportscar-l-64469263d3a6c918.jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.four {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://7-themes.com/data_images/out/75/7029170-ford-cars-wallpaper.jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.five {
  width: calc(66.6666666666666667% - 20px);
  height: 310px;
  background: url('http://img.otodriving.com/files/2015/10/Ford-www.otodriving.com-HD-33.jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.six {
  width: calc(66.6666666666666667% - 20px);
  height: 310px;
  background: url('http://resources.carsguide.com.au/styles/cg_hero_large/s3/ford-mustang-2015-v8-gt-(2).jpg') 50% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}
.seven {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://carsformula.com/wp-content/uploads/2014/10/2015-Ford-Mustang-50-Year-Limited-Edition-Specs.jpg') 80% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}

＆＃13;

<div class="wrapper">
  <div class="ideas__gallery">
    <h3 class="ideas__gallery__h3">Headline</h3>
    <a href="#">
      <div class="one border">
        <h4 class="ideas__gallery__h4">Headline Three Words</h4>
      </div>
    </a>
    <div class="two border"><a href="#" class="ideas__gallery__a">Headline Three Words</a>
    </div>
    <div class="three border"><a href="#" class="ideas__gallery__a">Headline Four Nice Words</a>
    </div>
    <div class="four border"><a href="#" class="ideas__gallery__a">One</a>
    </div>
    <div class="five border"><a href="#" class="ideas__gallery__a">Headline Three Words</a>
    </div>
    <div class="six border"><a href="#" class="ideas__gallery__a">One</a>
    </div>
    <div class="seven border"><a href="#" class="ideas__gallery__a">One</a>
    </div>
  </div>
</div>

＆＃13;

Answer 1

你的1个像素来自四舍五入。

如果您在Chrome中加载开发者控制台并检查宽度，则设置display: table会导致宽度向下舍入为整数。由于用户代理可以处理像素的分数，即使行为不一致，它仍然有效。

查看以下代码并通过开发人员控制台查看维度。 display: table显然正在降低小数像素。

＆＃13;

.wrapper {
  margin: 0 auto;
  max-width: 940px;
  background: #EBEBEB;
}
.border {
  border-radius: 4px;
}
.ideas__gallery div {
  margin: 10px;
}
.ideas__gallery__h4 {
  text-decoration: none;
  font-weight: bold;
  color: #fff;
  font-size: 22px;
  line-height: 1.2em;
  padding: 0;
  margin: 0;
}
.one:hover .ideas__gallery__h4 {
  color: #ff5b5d;
  transition: all 0.2s ease-in;
}
.table {
  display: table;
}
.ideas__gallery__h3 {
  color: #333;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  margin-bottom: 34px;
}
.one {
  width: calc(33.3333333333333333% - 20px);
  height: 310px;
  background: url('http://carwallstar.com/wp-content/uploads/2014/11/ford-car-images2015-ford-mustang--2015-ford-mustang-29-----froggpondcom-w8lqchv6.jpg') 100% 100% no-repeat;
  background-size: cover;
  float: left;
  text-align: center;
}

＆＃13;

<div class="wrapper">
  <div class="ideas__gallery">
    <h3 class="ideas__gallery__h3">Discover holiday activity ideas</h3>
    <a href="#">
      <div class="one border">
        <h4 class="ideas__gallery__h4">Headline Three Words</h4>
      </div>
      <div class="one border table">
        <h4 class="ideas__gallery__h4">Headline Three Words</h4>
      </div>
    </a>
  </div>
</div>

＆＃13;

为什么显示：表格从图像中减去1个像素？

1 个答案: