CODEWITHSUNDEEP
htmlcssreactjs
iphonic
iphonic

Reputation: 12717

CSS - How to align the text with image without stretching it

I am looking for solution of how can I align text with image and the image remains unstretched.

I am using the following code which in 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>
  );

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

Here is the demo which contains the code.

This is what I want to achieve

Problems in the demo are

  1. Image is stretched
  2. It is not aligned to left like in the screenshot

How to solve above problems.

Please help. Thanks.

Upvotes: 0

Views: 172

Answers (4)

Abdul Basit
Abdul Basit

Reputation: 84

Add CSS for image: 

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

Upvotes: 1

Eddie
Eddie

Reputation: 390

At the moment you have .App as text-align: center. this means that all your text in the code will be centre aligned unless you state otherwise in the child divs.

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

Here is your demo updated

Upvotes: 1

Mehraj Khan
Mehraj Khan

Reputation: 977

Just simply apply flex property to the .import-option

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

Upvotes: 0

Sethuraman
Sethuraman

Reputation: 651

I have checked and modified your code please use the following css in addition 

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

Updated Code Demo : https://codesandbox.io/s/y05167v0lv

Upvotes: 0

Related Questions