中间对齐多个 Div 元素

Question

我想中间对齐 2 个 div。我在 SO 上尝试了很多答案，但没有成功。

有人可以帮忙吗？

.image-container {
  position: relative;
  width: 120px;
  height: 120px;
}
.upload-text-wrapper {
  background-color: rgba(248, 247, 216, 0.7);
  width: 120px;
  height: 120px;
  position: absolute;
  top: 0;
  opacity: 0;
}
.upload-text-wrapper:hover {
  opacity: 1;
}

<div class="image-container">
  <img class="image-frame" src="http://www.telecomwiz.com/wp-content/uploads/2015/03/free-stock-photo-brick-wall-imageslive-decorating-a-white-brick-wall-decoration-picture-white-brick-wall-120x120." />
  <div class="upload-text-wrapper">
    <div class="upload-button-icon">X</div>
    <div class="upload-button-title">control 1</div>
  </div>
</div>

我想在悬停时将 upload-button-icon 和 upload-button-title 垂直和水平居中对齐，而不更改现有的 html 结构。

Answer 1

像这样：

.upload-button-icon, .upload-button-title {
    text-align:center;
     transform: translateY(35px);
}

https://jsfiddle.net/xs0gc0r2/4/ 注意：您可以更改 translateY 值以满足您的需要...注意 2：不确定 css/ 您将如何设置这些 div 的样式，可能需要进行一些调整。这适用于提供的 html/css...

Answer 2

也许使用这个不使用 CSS3 的变体会更好：您可以支持较旧的浏览器，并且在图像大小更改时不必调整 translateY 值。

.image-container {
  width: 120px;
  height: 120px;
  display: table;
}
.image-frame {
  position: absolute;
  z-index: -1;
}
.upload-text-wrapper {
  background-color: rgba(248, 247, 216, 0.7);
  text-align:center;
  vertical-align: middle;
  display: none;
}
.image-container:hover .upload-text-wrapper{
  display: table-cell;
}

<div class="image-container">
  <img class="image-frame" src="http://www.telecomwiz.com/wp-content/uploads/2015/03/free-stock-photo-brick-wall-imageslive-decorating-a-white-brick-wall-decoration-picture-white-brick-wall-120x120." />
  <div class="upload-text-wrapper">
    <div class="upload-button-icon">X</div>
    <div class="upload-button-title">control 1</div>
  </div>
</div>

中间对齐多个 Div 元素

Middle Align Multiple Div Elements

html

css

alignment