CODEWITHSUNDEEP
javascriptcssreactjsstyles
Kenny Quach
Kenny Quach

Reputation: 125

How to get the text to be in alignment after a line break in react js

I cant get the text to be in alignment after the line break. I have tried using css (margin bottom on the text, etc).

Margin bottom does not work. Also tried to change the line height buit to no avail.

<Col md={6}>
  <ul className="deets">
    <li><FaRegHandshake classname="icons"/><span style={{marginBottom:"90", marginLeft:"5px"}}>Let us help you  {this.state.personalized}</span></li>
    <li><FaPhone classname="icons"/><span style={{marginBottom:"90", marginLeft:"5px"}}>Our representative contacts you within 24 hours</span></li>
    <li><FaToolbox classname="icons"/><span style={{marginBottom:"90", marginLeft:"5px"}}>We collect all the necessary requirements from you</span></li>
    <li><FaUserSecret classname="icons"/><span style={{marginBottom:"90", marginLeft:"5px"}}>We keep confidentiality with all of our clients by signing NDA</span></li>
  </ul>
</Col>

This is an image of my current problem

The problem is that for each <li> element, when the text wraps, the text on the second line lines up horizontally with the image above it and is not indented to line up horizontally with the text above it that is part of the same <li>.

Upvotes: 1

Views: 1622

Answers (3)

Treycos
Treycos

Reputation: 7492

Using flex should solve your problem, do not forget about setting a fixed size to your image to avoid having it stretch, and set the align-items to flex-start to have your icon on the top

Working example : 

li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

li img {
  width: 30px;
  height: 30px;
}
<Col md={6}>
  <ul className="deets">
    <li><img src="https://img.icons8.com/ios-glyphs/30/000000/albatross.png"><span style={{marginBottom:"90", marginLeft:"5px"}}>Our representative conzrhtzhtthhtrhtrhtrhtthzrthhhhhhhhhhhhhhhhh<br/>hhhhhhhhhhhhhhhhhh<br/>hhhhhhhhhhhhhhhtaqergergerhgerherhqerherhqerherhqerhqerhqerhqerherhqerheherherhcts you within 24 houerqgerhqerhqretjhqerjqertjqrtjqrtjqrtjrtjrs</span></li>
    <li><img src="https://img.icons8.com/ios-glyphs/30/000000/albatross.png"><span style={{marginBottom:"90", marginLeft:"5px"}}>We collect all the necessary requirements from you</span></li>
    <li><img src="https://img.icons8.com/ios-glyphs/30/000000/albatross.png"><span style={{marginBottom:"90", marginLeft:"5px"}}>We keep confidentiality<br/> with all of our clients<br/> by signing<br/> NDA</span></li>
  </ul>
</Col>

Upvotes: 0

Hamed
Hamed

Reputation: 1381

This may give you an idea:

class App extends React.Component {
  render() {
    return ( 
      <ul>
        <li><div className='item'><div className='left'>1</div><div className='right'>2</div></div></li>
        <li>3</li>
        <li>4</li>
      </ul>
    );
  }
}

ReactDOM.render( < App / > ,
  document.getElementById('root')
);
.item {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

.right {
  align-self: flex-end;
  border: 1px solid black;
  width: 30%;
}

.left {
  align-self: flex-start;
  border: 1px solid blue;
  width: 30%;
}
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script><div id="root" />

Upvotes: 0

HolyMoly
HolyMoly

Reputation: 2080

try:

li {
  display: flex;
  flex-direction: row;
}

you can probably remove the inline styling

Upvotes: 1

Related Questions