Tips for achieving text alignment after a line break in React JS

I am struggling to align the text properly after a line break. I have attempted using CSS, such as setting margin bottom on the text.

Unfortunately, margin bottom does not seem to work. I also tried adjusting the line height without success.

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

Here is an image illustrating my issue

The problem lies in each <li> element where the wrapped text on the second line aligns horizontally with the image above it, rather than being indented to align horizontally with the text from the same <li>.

javascriptcssreactjsstyles

Answer №1

experiment with:

li {
  utilize: flex;
  align-orientation: row;
}

consider removing the explicit styling within the element itself

Answer №2

If you're looking for inspiration, consider the following example:

class Application 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( <Application /> ,
  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" />

Answer №3

To solve your issue, consider using the flex property. Be sure to set a fixed size for your image to prevent stretching and align items using align-items: flex-start to position your icon at the top.

Here is an example of how it can be implemented:

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 will contact you within 24 hours<br/>Lorem ipsum dolor sit amet</span></li>
    <li><img src="https://img.icons8.com/ios-glyphs/30/000000/albatross.png"><span style={{marginBottom:"90", marginLeft:"5px"}}>We gather all 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 ensure confidentiality with our clients through NDA agreements</span></li>
  </ul>
</Col>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accessing data from an array using onClick in a React component

I have an array.map of buttons that cycles through API data. When a button is clicked, I want to take that specific button's data and store it in local storage. I've been searching on Google but can't figure out how to do this. Any ideas? {t ...

javascriptreactjs

Using MongoDB to restrict fields and slice the projection simultaneously

I have a User object with the following details: { "_id" : ObjectId("someId"), "name" : "Bob", "password" : "fakePassword", "follower" : [...], "following" : [..] } My goal is to paginate over the follower list using the slice projection operat ...

javascriptnode.jsmongodbmongoosemongodb-query

Support for both Fetch API and XMLHttpRequest across browsers is imperative for seamless data retrieval and

Currently, I am diving into the world of ajax programming techniques. However, I recently discovered that the XMLHttpRequest is deprecated and now I must transition to using the Fetch API. The catch is, according to MDN, the Fetch API is still considered e ...

javascriptxmlhttprequestfetch-api

`Is there a way to transfer a GUID from a View to JavaScript?`

I need to pass a GUID as a parameter from a View to a JavaScript function. However, I encountered an error message in Firefox stating "identifier starts immediately after numeric literal." Below is the code snippet from the View: onchange="updateOrder(&l ...

javascriptasp.net-mvc-4

Materialize.css | managing spaces, indentation, and 'overriding' in a span element

I recently started using a new framework called Materialize CSS for my project and I'm still getting the hang of it. One issue I've encountered is that long texts in my sidebar are creating large spaces between line breaks and strange indents. D ...

jqueryhtmlcssmaterialize

Picture is not displaying properly post-rotation

Is there a way to rotate an image by 90 degrees and display it in a Card Component without it covering the text? Currently, I am utilizing Element.io, but encountering issues with the rotated image overlapping the text. The image currently has the followi ...

cssvue.js

Issue: Actions should be in the form of plain objects. However, the given type is 'Promise'. To resolve this, consider incorporating middleware into your React Native store

Currently, I am facing an issue while trying to retrieve products from Firebase. Despite having redux-thunk installed to manage promises and using middleware in my store, I encountered the following error: Actions must be plain objects. The actual type d ...

javascriptreactjsreduxreact-reduxredux-thunk

JavaScript is incorrectly showing the array as empty despite containing strings

I am experiencing an issue with my array of strings in JavaScript. Despite having strings in the array when I print it in the console, the forEach function runs 0 times and JS claims the array is empty when I print its size. What could be causing this?http ...

javascriptarraysstring

Utilize ngClass for every individual section

I have completed the implementation of all UI components, which are visually appealing. https://i.sstatic.net/hxJQr.png Here is the data structure I am using: public filters = [ { tag: 'Year', label: 'ye ...

cssangulartypescriptng-class

"Discover the process of incorporating two HTML files into a single HTML document with the help of

I successfully created both a bar chart and a pie chart using d3.js individually. Now, I am trying to load these charts into another HTML file using jQuery. $(document).ready(function() { console.log("ready!"); $("#piediv").load("file:///usr/local ...

javascriptjqueryhtmld3.js

Struggling to implement React.RefObject in TypeScript

I am currently in the process of converting this class module to Typescript, but I am having trouble defining the object reference correctly. To view the example, click here. My current definition for the reference holder is as follows: private wrapperRe ...

javascriptreactjstypescript

What is the best method for retrieving text from the aria-label attribute?

Currently, I am delving into the world of web scraping. My goal is to extract the work-life balance rating from the Indeed website. However, the main obstacle I'm encountering is the extraction of text from the aria-label attribute so that I can retri ...

htmlcssseleniumweb-scrapinggetattribute

Durable Container for input and select fields

I need a solution for creating persistent placeholders in input and select boxes. For instance, <input type="text" placeholder="Enter First Name:" /> When the user focuses on the input box and enters their name, let's say "John", I want the pl ...

javascriptjqueryhtmldomplaceholder

Icons from the Material-UI library

Issue at Hand In my react-django application with material-ui, I have been able to import and utilize material-ui icons seamlessly. However, today I ran into an issue after trying to import a new icon from material-ui. import WebIcon from '@mui/ico ...

reactjsmaterial-ui

Variations in the module pattern in JavaScript

Can someone help me understand the differences in these methods of creating a javascript "module"? I'm just looking for some clarification. A) var foo = function() { var bar = function() { console.log('test'); }; retur ...

javascriptmodule

What are the advantages of generating an HTML string on the server side and adding it to the client side?

Is there a more efficient method for transferring a large amount of data from the server to the client and dynamically generating tables, divs, and other HTML elements using JavaScript (jQuery)? Initially, I attempted to generate these elements on the cli ...

javascriptjqueryasp.nethtml

The hamburger icon seems to be frozen and unresponsive

I'm struggling to get my hamburger icon to reveal the navigation bar when clicked. The icon itself functions properly and adapts to different screen sizes, but the overlay remains stationary. Check out my code on JSFiddle! <html> <head> ...

javascripthtmlcss

Can a Javascript binary search only match on values greater or equal?

When searching, this code will find the closest match. Usually, the closest match's x value is smaller than the target.x. Is there a way to find the closest match where match.x is greater than or equal to the target.x value and match.y is the nearest ...

javascriptbinary-search

Adjust the hue of a Three.js world map

Check out this awesome Three.js demo with a 3D Globe: I've been trying to modify the color of the globe from black to navy blue, but despite my efforts in editing the source files, I haven't been successful in changing its appearance. My unders ...

javascriptthree.jswebgl-globe

Is it possible to invoke a computed property within the props of a child component in Vue.js?

In the context of my child and parent components, I have a boolean prop in the child component with a default value of false. When calling the child component within the parent component and setting it based on a computed function that returns a boolean va ...

javascriptvue.jsvuejs2vue-props