如何在 div 框周围制作表格答案

【问题标题】：How do i make a form around a div box如何在 div 框周围制作表格
【发布时间】：2022-02-08 00:47:24
【问题描述】：

我创建了一个包含图像和文本的小盒子 div。但我不知道如何在它周围添加一个表单，当我将鼠标悬停在框的任何部分时，它会点击提交。

.trust-box {
  width: 200px;
  height: 80px;
  margin: 20px;
  background: #fff;
  color: #000;
  border-radius: 5px;
  text-align: center;
}

<div class="trust-box">
  <img src="https://images.pexels.com/photos/34299/herbs-flavoring-seasoning-cooking.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="trust" width="50" height="50">
  <span>Portis Wallet</span>
</div>

再一次，如何使图像和文本在框内水平对齐？ The div box image.

【问题讨论】：

标签： html css image submit vertical-alignment

【解决方案1】：

研究mouseenter 以添加用于悬停的事件侦听器。为了对齐你的元素，你可以使用flexbox。请参阅下面的 sn-p：

.trust-box {
  width: 200px;
  height: 80px;
  margin: 20px;
  background: #fff;
  color: #000;
  border-radius: 5px;
  border: 1px solid black;
  text-align: center;
  display: flex;
  justify-content: center; 
  align-items: center;
  gap: 1rem;
}

<div class="trust-box">
  <img src="https://images.pexels.com/photos/34299/herbs-flavoring-seasoning-cooking.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="trust" width="50" height="50">
  <span>Portis Wallet</span>
</div>

更多关于flexboxhere。

【讨论】：

【解决方案2】：

你应该试着把它做成一个按钮

<button type="button" class="trust-box">
  Portis Wallet
  <img src="images/Portis.png" alt="trust" width="50" height="50">
</button>

对齐图像你可以尝试margin-top或top

【讨论】：

谢谢。但是当我把它改成上面的按钮时。当我尝试调整屏幕宽度以适应不同的尺寸时，媒体查询中的一切都被扭曲了
我该如何解决这个问题？
它不仅仅是一个按钮。它们在整个页面上显示为 flex。就像 60 个在 4m 的行上显示为 flex
您是否尝试过调整按钮宽度以适应不同的屏幕尺寸？
是的。我做了但仍然没有工作