中心容器和使用负边距

时间:2016-09-22 15:16:36

标签: html css

我是造型人物。

我想这样做,以便当图像小于文本列时,图形缩小到它的大小和中心,因为我正在使用:

div {
  width: 20em;
  margin: 0 auto;
  background-color: #f8f8f8;
}
figure {
  display: table;
  margin: 1rem auto;
  padding: 2rem 2rem;
  background-color: #eee;
}
figure img {
  max-width: 100%;
  margin: 0 auto;
}
<div><figure>
    <img src="https://placehold.it/100x100" alt="100x100 placeholder">
 </figure>
<figure>
    <img src="https://placehold.it/400x100" alt="400x100 placeholder">
</figure></div>

问题是,当图像是列的大小时,我希望图形在列外渗出。为此,我通常使用:

div {
  width: 20em;
  margin: 0 auto;
  background-color: #f8f8f8;
}
figure {
  display: table;
  margin: 1rem -2rem;
  padding: 2rem 2rem;
  background-color: #eee;
}
figure img {
  max-width: 100%;
  margin: 0 auto;
}
<div><figure>
    <img src="https://placehold.it/100x100" alt="100x100 placeholder">
 </figure>
<figure>
    <img src="https://placehold.it/400x100" alt="400x100 placeholder">
</figure></div>

但该解决方案会移除margin: auto;居中

我很欣赏只有CSS的解决方案,但如果没有别的办法,js和jquery会做的

1 个答案:

答案 0 :(得分:2)

figure设为inline-table并将text-align:center应用于父级。

body {
  background: lightgreen;
}
div {
  width: 20em;
  margin: 0 auto;
  background-color: #f8f8f8;
  background: cornflowerblue;
  text-align: center;
}
figure {
  display: inline-table;
  margin: 1rem -2rem;
  padding: 2rem 2rem;
  background-color: #eee;
}
figure img {
  max-width: 100%;
  margin: 0 auto;
}
<div>
  <figure>
    <img src="https://placehold.it/100x100" alt="100x100 placeholder">
  </figure>

  <figure>
    <img src="https://placehold.it/400x100" alt="400x100 placeholder">
  </figure>
</div>