Question

我正在尝试显示一个图像，在屏幕上垂直和水平居中（在我的情况下，是一个模态屏幕）。图像必须最高为80％，宽度为80％。它可以是风景，广场或肖像。

我已经实现了这一点。但是现在我需要在图像周围添加一个div，以便我可以应用文本效果。

这是我到目前为止所做的。

<div class="imageContainer">
    <img id="imgContainer" class="fullimage animated fadeIn" src="http://cameraflare.com/photostore/23d255d8-e259-47ee-be2d-fae68c730f6d/afda43dd-5a81-40b2-8161-d1f222689d3f.jpg">
    <h2>
              <span>The one and only:
                <span class='spacer'></span>
                <br />
                <span class='spacer'></span>
                The Hulk
                </span>
                </h2>
  </div>

我正在努力实现本教程所展示的内容，除了他们的演示在屏幕左侧对齐。我的图像居中。

https://css-tricks.com/text-blocks-over-image/

如何将imageContainer div设为＆＃39;拥抱＆＃39;图像？

Answer 1

不太确定，但我认为您正在寻找的是以下内容：

将.imageContainer设为display: inline-block并添加text-align: left
将图片容器的父级设置为text-align: center

所以你会让你的div居中，但你也会用边框包裹/拥抱你的图像。看看这里：

https://jsfiddle.net/0k3wrfxt/

Answer 2

您可以使用 css3 flexbox 概念来实现此目的。将以下样式添加到图像的父容器

显示：弯曲;
对齐项：中心;
证明含量：中心;

并删除 .imageContainer 上的保证金：100px; ，它会正常工作。我已添加下面的代码段。

＆＃13;

html,body{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  
  }
.fullimage {
  vertical-align: top;
  display: block;
  margin: auto;
  border-radius: 7px;
}

.imageContainer {
  max-height: 80vh;
  max-width: 80vw;
  border: solid;
  /*margin: auto;
  margin-left:100px;*/
  position: absolute;
  padding: 0;
}

h2 {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
}

h2 span {
  color: white;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

h2 span.spacer {
  padding: 0 5px;
}

＆＃13;

<div class="imageContainer">
    <img id="imgContainer" class="fullimage animated fadeIn" src="http://cameraflare.com/photostore/23d255d8-e259-47ee-be2d-fae68c730f6d/afda43dd-5a81-40b2-8161-d1f222689d3f.jpg">
    <h2>
              <span>The one and only:
                <span class='spacer'></span>
                <br />
                <span class='spacer'></span>
                The Hulk
                </span>
                </h2>
  </div>

＆＃13;

围绕中心图像的DIV

2 个答案: