What's the best way to adjust the alignment of these elements?

I'm having trouble aligning a material icon with text. Here's the HTML I'm currently 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 anyone can provide assistance, it would be greatly appreciated. Thank you!

htmlcssgoogle-material-icons

Answer №1

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style></style>
</head>
<body>

...

</body>
</html>

Follow this structure to avoid duplicating body and style tags multiple times.

Answer №2

Initially, the structure of your HTML and CSS needs some improvement as it is not well formatted.

One important thing to note is that you should use <li> within either a <ul> or <ol> tag only.

To enhance your code, consider implementing the following:

<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>
    <li>
        <a>Enabled</a>
    </li>
</ul>

By utilizing this code structure, you can ensure proper alignment of icon and text properties.

Answer №3

Check out this code snippet:

    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>

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

How do I ensure all columns have equal heights?

I have tried using flexbox, but the column heights are still not the same. I have looked at various methods on websites like W3Schools and Medium, but none of them seem to work. Initially, using the flex method worked, but it seems to be disappearing when ...

htmlcssflexboxbootstrap-4

Customizing element borders based on device size using bootstrap

I'm currently working with Bootstrap to design a mobile-first responsive layout. I have set up multiple rows and columns that I adjust based on different screen size categories. Is there a way to style borders using just Bootstrap classes for the var ...

cssresponsive-designmedia-queriesborderbootstrap-4

Transform HTML Response into PHP Array

When I make a web call in PHP, the response I am receiving is unlike anything I have encountered before. Despite trying both the json_decode function and the parse_str method, I am unable to extract the values into an array. My goal is to create an array ...

phphtmldecode

The responsive table works flawlessly in all platforms except for the default iOS 7 mail application

When using the default iOS 7 (iOS 7.1.1) mail app, there seems to be an issue with rendering a table correctly. Browsers like Chrome, Firefox, and Safari (latest versions) display both the desktop and mobile views perfectly. However, Internet Explorer only ...

ioscssemailresponsive-designemail-client

Deleting a button from a list item or array in Angular 12

Having some trouble removing a list item with the click button, I've tried a few options but nothing seems to be working. Can anyone offer assistance? I need to remove a list item from my users array when clicked. Below is the Typescript code and cor ...

javascripthtmlangulartypescript

Signal for a complete 360 degree rotation of an image

Looking to enhance my 360 image rotator with an indicator that fades out after the first image. I added this function to the end of my 360.js: (function(){ if( $('#first').css('visibility','hidden')) { $('#rotat ...

javascriptjqueryhtmlcss

Accessing an image with a URL in AngularJS

Update: Just learned that specifying the url in the scope is unnecessary. I also appreciate the reminder to be cautious with the key, thank you. I'm attempting to display images and their corresponding names in an HTML5 document. Here's a snippe ...

angularjshtml

Aligning text vertically alongside an image

Looking for some help with aligning the blue title on my website (under the "about us" section) with the Norway flag positioned to its left. I've attempted adjusting the padding-bottom and margin-bottom to shift the title up a few pixels, but it didn ...

cssalignmentvertical-alignment

Tips for concealing scrolled material beneath a stationary see-through banner

After searching through various questions on the topic, I have not found a working solution. My goal is to hide the body content beneath a transparent fixed header when scrolled. Take a look at my current setup here: https://jsfiddle.net/nukuf23L/ If pos ...

cssscrollfixedtransparent

The image is layering on top of the navigation submenus

Struggling to fix an overlapping issue on a Wordpress site at the moment. The problem lies within the sub menu under the "Portfolio" section on this website. The image is covering up the submenu, hiding it in the background when I want it to display in fro ...

csswordpressz-index

Revise the mobile navigation opening feature to activate by clicking on a link instead of an icon

I've been struggling with a design issue for days now. I customized a template by editing its header and footer elements, incorporating Bootstrap 3 since the template was based on it. However, I recently discovered that Bootstrap 3 does not support su ...

javascriptcsstwitter-bootstrapmobilesubmenu

Is there a way to rearrange the order of columns in Bootstrap 4?

Presenting a straightforward scenario: <div class="row"> <div class="col-md-12 col-lg-6 col-xl-7">A</div> <div class="col-md-12 col-lg-6 col-xl-5">B</div> </div> In essence, if md A B I wish for it to be like ...

cssbootstrap-4

Guide to deactivating a control within a User Control

I anticipated that making this change would be straightforward, but I am encountering some difficulties. Initially, my asp.net markup for the server control appears like this: <ucTextArea:UserControlTextArea ID="taRemarks" runat="server" /> However ...

c#htmlasp.netwebformsmarkup

What is preventing my boolean from being altered?

Creating a basic calculator that can handle single-digit arithmetic. The current code is incomplete and redundant, so please avoid commenting on that. <!doctype html> <html> <head> <title>JavaScript Learning Zone</title> ...

javascripthtmlboolean

Incorporate the AngularJS controller into your JavaScript code

I am facing an issue with my jQuery UI dialog that contains a dynamic <select> populated with Angular and AJAX. The problem is that the AngularJS script still runs even when the dialog is not visible. To solve this, I added a condition to stop the s ...

javascriptjqueryhtmlajaxangularjs

JQuery ConcealAllRevealOne + Clickable Link to Expand DIV

My JQuery function, HideAllShowOne, allows me to easily toggle visibility of sections on my website: <script type="text/javascript" language="JavaScript"><-- function HideContent(d) { document.getElementById(d).style.display = "none"; } function ...

javascriptjqueryhtml

Guide to extracting JSON data on WAMP and displaying it on an HTML page using Worklight

I recently generated a JSON file on my WAMP server: { "address":[{ "name":"John" } ] } Unfortunately, I am facing difficulty in fetching this data into an HTML page within my Worklight mobile app. ...

htmljsonjquery-mobileibm-mobilefirstgetjson

The function of the Angular ng-include form action for posting a URL appears to be malfunctioning

When a form post is included in a parent HTML using ng-include, it does not trigger the submission action. <div ng-include src="'form.html'"></div> The code in the form.html file is as follows: <form action="next/login" method = ...

javascriptjqueryhtmlangularjsforms

Difficulty arises when using relative paths with XMLHttpRequest.send

Having difficulties with a basic task here. I'm in the process of creating a website without using a server, and I've hit a snag when it comes to accessing files via XMLHttpRequest. Looking at the example code provided below, you'll see tha ...

javascripthtmlxmlhttprequest

issue with displaying three images side by side in Internet Explorer

Hello everyone, I have created a code to display 3 images in a row. It works perfectly in Firefox but not in Internet Explorer. Here is my code: echo "<div class=\"container mod\"><ul id=\"three-col\" class=\"press\" ...

htmlcssinternet-explorer