使用CSS对齐图标和文本

Question

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

https://support.rstudio.com/hc/en-us/articles/200551906-Interactive-Plotting-with-Manipulate

我已经尝试将.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>

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;
}