Question

我有以下HTML和CSS。正如你所看到的，我的主要部分分为70％和30％两部分。此外，内部div具有设置为表格单元格的显示属性。在右内部div，我有图像幻灯片，垂直和水平都不适合div 100％。我还想在图像上悬停显示顶层文本。如何将图像放入可用空间？如何在图像悬停时将图像准确显示在图像的中心？

HTML：

<div id="investment">

    <div id="left ">

    </div>
    <div id="right">
        <img class="slides" src="..../img01.jpeg">
        <img class="slides" src="..../img02.jpeg">
        <img class="slides" src="..../img03.jpeg">
        <p id="top-layer">text here</p>
    </div>

 </div>

CSS：

#left {
    width: 70%;
    display: table-cell;
    vertical-align: middle;
 }
 #right {  
   position: relative;
   width: 30%;
   display: table-cell;
   vertical-align: middle;
 }
 #right #top-layer{    
   position: absolute;
   top: 0;
   left: 0;
   display: table-cell;
   vertical-align: middle;
 }

Answer 1

我认为您正在寻找以下解决方案。

可能会打扰你！

您正在使用table-cell，但table-cell属性不起作用，直到它的父级没有table属性。

水平对齐 -

#investment {
  display: table;
  width: 100%;
}

#left {
  width: 70%;
  display: table-cell;
  vertical-align: middle;
}

.slide {
  display: table;
}

#right {
  position: relative;
  width: 30%;
  display: table-cell;
  vertical-align: middle;
}

#right img {
  max-width: 100%;
}

.imageBlock {
  position: relative;
  display: table-cell;
}

.imageBlock p {
  position: absolute;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin:0;
}

.imageBlock:hover p {
  opacity: 1;
}

#right #top-layer {
  position: absolute;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: table-cell;
  vertical-align: middle;
}

#right:hover #top-layer {
  position: absolute;
  opacity: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: table-cell;
  vertical-align: middle;
}

<div id="investment">
  <div id="left ">
    THIS IS BLANK SPACE AND WIDTH = 70%
  </div>
  <div id="right">
    <div class="slide">
      <div class="imageBlock">
        <img class="slides" src="https://dummyimage.com/300x200/ff00ee/ff00ee">
        <p>HOVER TEXT</p>
      </div>
      <div class="imageBlock">
        <img class="slides" src="https://dummyimage.com/300x200/ffeerr/ffeerr">
        <p>HOVER TEXT</p>
      </div>
      <div class="imageBlock">
        <img class="slides" src="https://dummyimage.com/300x200/dddddd/dddddd">
        <p>HOVER TEXT</p>
      </div>
    </div>
  </div>
</div>

垂直对齐 -

#investment {
  display:table;
  width:100%;
}
#left {
    width: 70%;
    display: table-cell;
    vertical-align: middle;
 }
 #right {  
   position: relative;
   width: 30%;
   display: table-cell;
   vertical-align: middle;
 }
#right img {
  min-width:100%;
}
.imageBlock {
  position:relative;
}
.imageBlock p {
  position:absolute;
  opacity:0;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
}
.imageBlock:hover p {
  opacity:1;
}
#right #top-layer {
   position: absolute;
   opacity:0;
   top: 50%;
   left: 50%;
   transform:translate(-50%,-50%);
   display: table-cell;
   vertical-align: middle;
}
 #right:hover #top-layer{    
   position: absolute;
   opacity:1;
   top: 50%;
   left: 50%;
   transform:translate(-50%,-50%);
   display: table-cell;
   vertical-align: middle;
 }

<div id="investment">
    <div id="left ">
      THIS IS BLANK SPACE AND WIDTH = 70%
    </div>
    <div id="right">
      <div class="imageBlock">
        <img class="slides" src="https://dummyimage.com/300x200/ff00ee/ff00ee">
         <p>HOVER TEXT</p>
      </div>
      <div class="imageBlock">
        <img class="slides" src="https://dummyimage.com/300x200/ffeerr/ffeerr">
         <p>HOVER TEXT</p>
      </div>
      <div class="imageBlock">
        <img class="slides" src="https://dummyimage.com/300x200/dddddd/dddddd">
         <p>HOVER TEXT</p>
      </div>
    </div>
 </div>

如何使用表格单元格显示图像到div

1 个答案: