Click here to Skip to main content
15,849,996 members
Please Sign up or sign in to vote.
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
Updated 13-Nov-23 22:56pm
v2

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.
 
Share this answer
 
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[^]
 
Share this answer
 
v2

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900