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值。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

中间对齐多个Div元素

2 个答案: