html - 使用 CSS 对齐图标和文本

Question

我希望将文本放置在每个图标的右侧，但最终看起来像这样：

我尝试将 .panel 显示设置为表格，但看起来一团糟。

.panel {
  padding: 0 18px;
  background-color: white;
  /*#F7F7F7;*/
  display: none; //With a function it's then displayed as Block
  overflow: hidden;
  border: 0.5px solid #ccc;
}

.lock {
  float: right;
}

.status {
  float: left;
}

.status_icon {
  width: 30px;
  height: 30px;
  margin: 0;
  margin-top: 4px;
  margin-right: 15px;
  cursor: pointer;
  vertical-align: baseline;
  display: table-cell;
}

.lock_icon {
  width: 30px;
  height: 30px;
  margin: 0;
  margin-top: 4px;
  margin-right: 15px;
  cursor: pointer;
  vertical-align: baseline;
  display: table-cell;
}

<div class="panel">
  <div class="status">
    <img src="Iconos/closed.png" alt="Closed" class="status_icon" onclick="stat(event,this);">
    <p class="stat_text">Current status: Closed</p>
  </div>
  <div class="lock">
    <img src="Iconos/locked.png" alt="Locked" class="lock_icon" onclick="lock(event,this);">
    <p class="lock_text">Current lock: Locked</p>
  </div>
</div>

标签： htmlcss

Answer 1

使用display:flex将是实现此结果的最佳方法。试试这个 CSS 代码。

.panel {
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
  border: 0.5px solid #ccc;
  display: flex;
  justify-content: space-between;
}

.lock {
  display: flex;
}

.status {
  display: flex;
}

.status_icon {
  width: 30px;
  height: 30px;
  margin: 0;
  margin-top: 4px;
  margin-right: 15px;
  cursor: pointer;
}

.lock_icon {
  width: 30px;
  height: 30px;
  margin: 0;
  margin-top: 4px;
  margin-right: 15px;
  cursor: pointer;
}