How do I center a script in HTML? (New to coding)

Question

1.00/5 (1 vote)

See more:

At the end of my page, I have a script that lists the different 'celscis' (the big list of names) that the user can choose from. How do I center the script so that it is in the middle, and in line with the orange 'vote' button? I'm still new to coding so please excuse my lack of proper terminology.

My code looks like this:

HTML

<html>
	<head>
    <style>
        .blink {
            animation: blinker 2.5s linear infinite;
            color: red;
            font-family: cursive;
        }
        @keyframes blinker {
            10% {
                opacity: 0;
            }
        }
		body {
  		background-color: lightgray;
		}   
  </style>
</head>
      <h2 style="text-align:center" class="blink">CogSciDigHumJS</h2>
    <center><iframe
    src="https://cogsphere-acogsphere.hf.space"
    frameborder="0"
    width="350"
    height="150"
    ></iframe></center>
    <br>  
    </head>
    <body> 
    <center><img src="https://t3.ftcdn.net/jpg/02/78/34/04/240_F_278340471_pUlwAaBNW5wU181zVxoT6rQZdzuv7Jnm.jpg" alt="red carpet"></center><br>
    <center><label for "nameinput">Name:</label></center>
    <br>
    <br>
    <center><input type="text" id="nameinput" placeholder="Enter Your Name Here"></input></center>
    <br>
    <br>
    <center><div id="output" style="color: green; ">Waiting!</div></center>
    <br>
    <center><label>Pick a Celsci, Rate it on a scale of 1-5, then Vote!</label></center>
    <br>
  	<center><button type="button" style="background-color: orange" id="button1" onclick="click"> Vote! </button></center>
        <br>
		<script>
     var celscilist=[ 
'Celscis List','Anil Seth','Andrew2 Huberman','Donald Hoffman', 'Doug Hofstadter','Howard Gardner', 'Janelle Shane', 'Daniel Kahneman', 'Elizabeth Loftus', 'Elizabeth2 Loftus', 'Patricia Churchland','Bret Weinstein','Andrew Huberman', 'Tom Scott',  'Melanie Mitchell',  'Jordan Peterson',  'Timnit Gebru',  'Amy Cuddy',  'Mihaly Csikszentmihalyi',  'Martha Nussbaum',  'Noam Chomsky',  'Russell A Barkley',  'Slavoj Žižek',  'Nathaniel Drew', 'Lara Boyd',  'Yuval Noah Harari',  'Jordan2 Peterson',  'Yuval2 Noah Harari',  'Joscha Bach',  'Poppy Crum',  'Ryan Holiday',  'Marvin Chun',  'Jim Davies' 
]    
// Create a select element
var select = document.createElement("select");
var select2 = document.createElement("select");
   
// Create a function to add an option element with a given value and text
function addOption(value, text) {
  // Create an option element
  var option = document.createElement("option");
  // Set the value and text attributes
  option.value = value;
  option.text = text;
  // Append the option to the select element
  select.appendChild(option);
}

function addOption2(value, text) {
  // Create an option element
  var option2 = document.createElement("option");
  // Set the value and text attributes
  option2.value = value;
  option2.text = text;
  // Append the option to the select element
  select2.appendChild(option2);
}
   
// Loop from 1 to n and call the addOption function with the loop index as the value and text
for (var i = 0; i < celscilist.length; i++) {
  addOption(i, celscilist[i]);
}

// Loop from 1 to n and call the addOption function with the loop index as the value and text
  addOption2(0, "Rate");

   for (var i = 0; i < 5; i++) {
  addOption2(i, i+1);
}
   
// Append the select element to the document body
document.body.appendChild(select);
document.body.appendChild(select2);
    </script>
<script type="module"> 
    import { client } from "https://cdn.jsdelivr.net/npm/@gradio/client@0.1.4/dist/index.min.js";
    const generate = document.getElementById("button1");   
    generate.addEventListener("click", async () =>{
        try {         

 const app = await client("https://cogsphere-acogsphere.hf.space");
const result = await app.predict(0, [		
				 nameinput.value, // string  in 'Name' Textbox component		
				select2.value.toString(), // string  in 'How satisfied are you with using gradio?' Radio component		
				celscilist[select.value], // string  in 'Comments' Textbox component
	]);         
                         //output.appendChild(document.createTextNode(lastview.data))
           output.innerHTML = "Sent!" //lastview.data 
            } catch (error){
                 console.log("Error:",error.message); 
            }       
        }       
)
    </script>
    </body>
</html>

What I have tried:

I have tried using div, text align, and .

Posted 13-Nov-23 18:58pm

KayleeAmber

Updated 13-Nov-23 21:56pm

Richard MacCutchan

v2

Add a Solution

2 solutions

Solution 2

As Chris pointed out, you need to create a CSS file that links to your HTML file to manage all of the display options in your page, I created a page called 'my_styles.css, you can name it whatever you want AS LONG AS you refer to the same name in your HTML page using -

HTML

<link rel="stylesheet" type="text/css" href="my_styles.css">

Place this file in the same directory as your HTML file OR the correct method will be to create a folder for this file where all of your other CSS files will be kept, make sure that you then specify the correct path to this folder and teh respective file.

Remove all of the code under the 'style' heading in your HTML file, your code will thus look similar to the following as a basic example -

HTML

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="my_styles.css">
</head>

<body>
    <h2 class="blink">CogSciDigHumJS</h2>
    <center>
        <iframe src="https://cogsphere-acogsphere.hf.space" frameborder="0" width="350" height="150"></iframe>
    </center>
    <br>
    <center><img src="https://t3.ftcdn.net/jpg/02/78/34/04/240_F_278340471_pUlwAaBNW5wU181zVxoT6rQZdzuv7Jnm.jpg"
            alt="red carpet"></center>
    <br>
    <center><label for="nameinput">Name:</label></center>
    <br>
    <br>
    <center><input type="text" id="nameinput" placeholder="Enter Your Name Here"/></center>
    <br>
    <br>
    <!--Add an additional center tag for the 'celscilist' select element -->
    <center>
        <select id="celscilist"></select>
        <select id="rate">
            <option value="Rate">Rate</option>
            <!--Loop from 1 to 5 for rating options -->
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
    </center>
    <br>
    <center><div id="output" style="color: green;">Waiting!</div></center>
    <br>
    <center><label>Pick a Celsci, Rate it on a scale of 1-5, then Vote!</label></center>
    <br>
    <center><button type="button" style="background-color: orange" id="button1" onclick="click"> Vote! </button></center>
    <br>
    <script>
        //Your JavaScript code remains the same...
    </script>
    <script type="module"> 
    import { client } from "https://cdn.jsdelivr.net/npm/@gradio/client@0.1.4/dist/index.min.js";
    const generate = document.getElementById("button1");   
    generate.addEventListener("click", async () =>{
        try {         

 const app = await client("https://cogsphere-acogsphere.hf.space");
const result = await app.predict(0, [		
				 nameinput.value, //string  in 'Name' Textbox component...	
				select2.value.toString(), //string  in 'How satisfied are you with using gradio?' Radio component...		
				celscilist[select.value], //string  in 'Comments' Textbox component...
	]);         
                         //output.appendChild(document.createTextNode(lastview.data))
           output.innerHTML = "Sent!" //lastview.data 
            } catch (error){
                 console.log("Error:",error.message); 
            }       
        }       
)
    </script>
</body>

</html>

CSS File

CSS

body {
    background-color: lightgray;
    text-align: center; /* Center text content */
}

.blink {
    animation: blinker 2.5s linear infinite;
    color: red;
    font-family: cursive;
}

@keyframes blinker {
    10% {
        opacity: 0;
    }
}

/* Center the select elements */
select {
    margin-top: 10px;
}

/* Additional styling for your other elements can be added here */

I have created a working fiddle for you at - Center things for me [^]

Posted 14-Nov-23 6:37am

Andre Oosthuizen

Updated 14-Nov-23 6:38am

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Accepted Answer · 2023-11-13T22:54:00

What you could do is programmatically create a <center> element and append the two selects to that, then append this element to the document body. That would center things, but easier might be instead to add an element to the HTML with an id attribute:

// HTML
<center id="options-container"></center>

// JS
const container = document.getElementById('options-container');

...

container.appendChild(select);
container.appendChild(select2);

Only other comment I will make is that using <center> to center content is not really supported anymore, with it being outright removed from support in HTML5. Instead you should look into using CSS to layout your content more appropriately.

How do I center a script in HTML? (New to coding)

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us