How do I align these?

Question

How do I align these?

58 Views Asked by canary At 11 April 2025 at 04:37

Im trying to align a material icon with text but its not working. Here's the html im using:

<!DOCTYPE html>
<body scroll="no" style="overflow: hidden">
<html>
<head>
<body>
<link href='https://fonts.googleapis.com/css?family=Inter' rel='stylesheet'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<style>
li {
  list-style: none;
  display: inline;
  text-align: right;
}

a {
  text-decoration: none;
  text-align: right;
}
  
enabled {
  display: inline;
  }
</style>
<style>
.material-icons-outlined.orange600 { color: grey; }
</style>
<style> 
.material-icons-outlined.md-36 { font-size: 16px; }
</style>
  <li>
    <a href="https://" target="_blank"class="material-icons-outlined md-36 orange600">check_box</a>
  </li>

<style>
body {
    font-family: 'Inter';font-size: 14px;color: black;text-align: left;
}
  </style>
<a>Enabled<a>

If someone could help it would be very appreciated. Thanks!

Original Q&A

There are 3 best solutions below

**Prateek Chaubey** · Answer 1

First of all Your HTML and CSS are very bad formatted. Try To improve it. And also You can only use <li> should be in <ul> or <ol> tag.

So your code should look like this

<style>
body {
    font-family: 'Inter';font-size: 14px;color: black;text-align: left;
}
ul{
list-style:none;
display:flex;
}
  </style>
<ul>
  <li>
    <a href="http://" target="_blank"class="material-icons-outlined md-36 orange600">check_box</a>
  <li>
<a>Enabled</a>
</ul>

It will align the icon and text property.

**mimi** · Answer 2

try this :

    body {
        font-family: 'Inter';
        font-size: 14px;
        color: black;
        
        }
        
        
        a {
          text-decoration: none;
          text-align: right;
        }
        
     
          .material-icons-outlined.orange600 { 
              color: grey; 
          }
          .material-icons-outlined.md-36 { 
              font-size: 16px; 
          }
        .checkbox{
            display: flex;
            justify-content: center;
        }

  <div class="checkbox">
        <a href="https://" target="_blank"class="material-icons-outlined md-36 orange600">check_box</a>
        <a>Enabled<a>
    </div>

**Ferdous Hasan** · Answer 3

Ferdous Hasan On 09 May 2021 at 15:13

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style></style>
</head>
<body>
....

</body>
</html>

use this format instead of using body and style tag more than one time.

How do I align these?

There are 3 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in GOOGLE-MATERIAL-ICONS

Trending Questions

Popular # Hahtags

Popular Questions