Css 如何使文本在移动后显示在居中图像的旁边？ 基本上，我有一个块，我想集中在页面的中间。从技术上讲，此块应该同时具有图像和文本。当块未悬停在上方时，我只希望图像显示在页面中央。将块悬停在上方时，我希望图像向左移动一点，并使文本显示在其右侧。到目前为止，我已经设法使图像居中，使其在悬停时向左移动，并使悬停显示文本。问题是，文本在图像下面。我理解这是因为图像和文本在不同的div中，因此它在之后出现是有意义的。但是，我不确定如何使它们都位于同一个div中，并确保在块未悬停时图像位于页面的中心位置。这可能吗

具体来说，以下是该部分到目前为止的HTML代码：

<section class="about-us">
    <!-- Image division -->
    <div class="chatBox">
        <img src='./art/chatboxAbout.png' width= "150" height = "150" />
    </div>
    <!-- Text division, the actual about-us part -->
    <div class="about-us-text-container">
        <!-- Header part -->
        <h1>about us</h1>
        <!-- Horizontal line for styling -->
        <hr />
        <!-- Actual text -->
        <p>For artists, not by artists</p>
    </div>
</section>

以下是到目前为止整个代码的JSFIDLE链接：

---

感谢您的帮助！非常感谢你

这里有一个可能的解决方案。我对您的代码做了很多更改，主要是：容器只包含您已有的元素（而不是

200vh

=窗口高度的两倍）。只需在其周围添加另一个容器，并在其后面添加兄弟。

过渡

影响

所有

，即

宽度

、

不透明度

和

变换：缩放

以在不悬停时保持图像居中。而

悬停

在容器上，而不是在图像上，这样可以防止以前的跳跃效果：

。关于我们{
宽度：100%；
高度：150像素；
背景色：#fff；
显示器：flex；
证明内容：中心；
对齐内容：居中对齐；
边缘顶部：50px；
}
.关于我们.聊天室{
位置：相对位置；
文本对齐：居中；
}
.关于我们.关于我们文本容器{
文本对齐：居中；
左边距：15px；
不透明度：0；
过渡：所有1；
宽度：0；
变换：比例（0）；
}
.关于我们：悬停.关于我们文本容器{
不透明度：1；
宽度：150px；
变换：比例（1）；
}

关于我们

对于艺术家，而不是艺术家

非常感谢您！我一个人是不会得出这个结论的！！我只是有个问题，是什么让悬停效果在scale（）部分起作用的？因此，这里的聊天框（图像）总是向上，但悬停在。关于我们的部分显示文本？这是如何将图像推向侧面的？这是缩放（从零到全尺寸）和宽度（相同）的组合。由于flex设置始终居中，因此默认情况下图像居中，因为文本框宽度为零。转换时，两个元素一起居中，为图像容器创建“向左移动”效果，因为右元素正在增长。啊，我明白了。非常感谢你！

/* General sizing and format for the about-us segment */
.about-us{
    width: 100%;
    height: 200vh;
    background-color: #fff;
}

/* Formatting for the chatBox image, basic stuff */
.about-us .chatBox{
  position: relative;
  margin-top: 50px;
  text-align: center;
  transition: transform 0.3s ease; /* Preparing for transition */
  transition: translateX(0px); /* What the transition is */
}

/* Move left on hover effect */
.chatBox:hover{
  transform: translateX(-200px);
}

/* Formatting for the general text div */
.about-us .about-us-text-container{
  margin-top: 50px;
  text-align:center;
  margin-left: 15px;
  opacity: 0; /* Don't display unless hovered */
  transform: 1s; /* Setting duration for the hover opacity transition */
}

/* Show on hover effect */
.chatBox:hover + .about-us-text-container{
  opacity: 1;
}

/* Formatting for the header */
.about-us .about-us-text-container h1{

}

/* Formatting for the horizontal line */
.about-us .about-us-text-container hr{

}

/* Formatting for the paragraph */
.about-us .about-us-text-container p{

}