CSS-如何在不拉伸的情况下使文本与图像对齐

Question

我正在寻找如何使文本与图像对齐并使图像保持未拉伸的解决方案。

我在reactjs中使用以下代码

return (
    <div className="App">
      <div style={{ marginTop: 10 }}>
        <div className="import-option">
          <img
            src={`https://uploads.codesandbox.io/uploads/user/7b703edc-140c-4f14-aa28-17e618788f1e/9zzd-download.png`}
          /><span className="import-option-button"> User Import(CSV)</span>
        </div>
        <div className="import-option">
          <img
            src={`https://uploads.codesandbox.io/uploads/user/7b703edc-140c-4f14-aa28-17e618788f1e/9zzd-download.png`}
          /><span className="import-option-button"> User Import(Export)</span>
        </div>
      </div>
    </div>
  );

以及后续的CSS

.App {
  font-family: sans-serif;
  text-align: center;
}

.import-option-button {
  text-decoration: underline;
  font-size: 12px;
  color: #4da1ff;
}

.import-option-button:hover {
  cursor: pointer;
}

.import-option {
  padding-bottom: 5px;
}

这里是demo，其中包含代码。

这是我想要实现的

演示中的问题是

1. 图像被拉伸
2. 它没有像屏幕截图中那样向左对齐

如何解决上述问题。

请帮助。 谢谢。

Answer 1

目前，您将.App设置为text-align：center。这意味着除非您在子div中另外声明，否则代码中的所有文本都将居中对齐。

    .import-option {
      padding-bottom: 5px;
      text-align: left!important;
      margin-left: 350px;
    }

这是您的demo更新了

Answer 2

Add CSS for image: 

  **.import-option img { vertical-align: bottom; }**

Answer 3

我已经检查并修改了您的代码，请另外使用以下CSS

.import-option {
  padding-bottom: 5px;
  clear: both;
}
.import-option img{
  width: 20px;
  height: 20px;
  float: left;
  margin: 0 4px 0 0;

}
.import-option span{
  float: left;
  padding: 7px 0;
}

更新的代码演示：https://codesandbox.io/s/y05167v0lv

Answer 4

只需将flex属性应用于.import-option

.import-option {
display: flex;
align-items: center;
}