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 >
< 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 >
< div class = "parentDiv" >
< 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:
Last Updated :
20 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...