需要将图像下方的按钮与右侧的文本对齐

Question

¡您好！我一直在寻找这样的问题，但我只找到了this one，它的解决方案对我来说毫无用处。

我有一个展示一些书籍的网站，它是 edicionesparalelo.com，还有一个人们可以购买这些书籍的网站：tienda。edicionesparalelo.com我想在每个网站下面放一个按钮上面写着 "Ir a la tienda" 的书本图片（去商店），但我不知道如何对齐图片下方的按钮并使文本保持原样。我试过浮动和定位，但没有办法。

书页示例 in this link。我想要的是在图片下面放一个按钮。

我奇怪地觉得这会被重复，但我知道我在网上搜索了整整一个小时。

你能帮帮我吗？谢谢！

Answer 1

这是创建所需布局的一种方法。创建两个块级元素，一个用于保存图像和按钮，另一个用于保存内容（header 和文本）。

将.thumb-panel向左浮动，保持.text-panel为常规流入元素

根据需要调整边距、边框和填充。

.content-panel{
  overflow: auto; /* keep the float contained within this panel */
  border: 1px dotted blue;
}
.thumb-panel {
  float: left;
  width: 100px;
  border: 1px solid gray;
  text-align: center;
  margin-right: 20px; /* for example */
}
.thumb-panel img {
  display: inline-block;
  margin-bottom: 20px; /* for example */
}
.thumb-panel button{
  display: inline-block;
  margin-bottom: 20px;
}
.text-panel {
  overflow: auto; /* prevents text flow wrapping around floated panel */
  border: 1px solid gray;

}

<div class="content-panel">
  <div class="thumb-panel">
    <img src="http://placehold.it/80x120">
    <button>Button</button>
  </div>
  <div class="text-panel">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>
    </div>
  </div>

需要将图像下方的按钮与右侧的文本对齐

Need to align a button under an image with a text at their right

css

css-position

alignment