How to make div with left aligned text and right aligned icon using CSS ?
In this article, we will learn to create an HTML div that has left-aligned text and a right-aligned icon. Sometimes, we need to align the text to the left side & if there is an image or icon used then align it to the right side. For this, we can use the display property by setting the value as a flex property that is used to display an element as a block-level flex container. along with using the float property that can be used to float the item to the specified position.
Properties Used:
- display: To display text and icons side by side, we will use the display: flex property.
- float: To set the icon on the right side of the div, we use float: right property.
Approach: We will use HTML to create a div. After that, we add text and icons to the div and style the div elements according to our requirements using CSS.
The below example demonstrates the above approach.
Example 1: In this example, we have set up the icon on the right side of the text using the display: flex property. In the below output, due to display: flex and flex-direction: row properties text and icon appear side by side in every div element.
HTML
<!DOCTYPE html> <html> <head> <title>Text alignment with icon</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <style> div { display: flex; flex-direction: row; height: 50px; width: 400px; font-size: 30px; } </style> </head> <body> <!--display for the all div is block--> <div style="background-color:green; color:white"> <span class="text">GeeksforGeeks</span> <span class="icon"> <i class="material-icons">computer</i> </span> </div> <div style="background-color:white; color:green"> <span class="text">GeeksforGeeks</span> <span class="icon"> <i class="material-icons">computer</i> </span> </div> <div style="background-color:green; color:white"> <span class="text">GeeksforGeeks</span> <span class="icon"> <i class="material-icons">computer</i> </span> </div> </body> </html> |
Output:
Example 2: In this example, we have set up the icon on the right side of the div. In the output, you can see all 3 divs one below another, an icon on the right side of the div, and text on the left side of the div element.
HTML
<!DOCTYPE html> <html> <head> <title>Text alignment with icon</title> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= <style> .parentDiv { display: block; height: 110px; width: 400px; font-size: 30px; } /* To set icon at the right side of the div*/ .icon { margin-left: 10px; float: right; } </style> </head> <body> <!--parent div--> <div class="parentDiv"> <!--display for the all div is block--> <div style="background-color:green; color:white"> <span class="text">GeeksforGeeks</span> <span class="icon"> <i class="material-icons">computer</i> </span> </div> <div style="background-color:white; color:green"> <span class="text">GeeksforGeeks</span> <span class="icon"> <i class="material-icons">computer</i> </span> </div> <div style="background-color:green; color:white"> <span class="text">GeeksforGeeks</span> <span class="icon"> <i class="material-icons">computer</i> </span> </div> </div> </body> </html> |
Output:
Please Login to comment...