Distribute the text evenly on either side of the center

I have a unique layout with two datalist elements centered, text positioned above, and two buttons integrated.

body {
  background-color: DarkGray;
}
h1 {
  color: black;
  font-size: 30px;
  font-family: 'lucida console'
}
span {
  color: #443431;
  font-weight: bold;
  font-family: 'Courier New'
}
<ol style="text-align:center; list-style-position:inside;">
  <h1>Ref</h1>
  <form name="ref" onsubmit="return generateLink();">
    <span>PiCK</span>
    <br>...
    
    <input type="submit">
    <input type="reset">
  </form>
</ol>

https://i.sstatic.net/cd0Jb.png

If you're wondering how to recreate the following design:

https://i.sstatic.net/Lp8Bf.png

Feel free to share any suggestions or recommendations on how to proceed. This is my first experience working with html, so I'm open to learning different methods of achieving this.

htmlcsscss-floatcentering

Answer №1

If you are just starting to learn HTML, here is a simple way to get started. I recommend learning Bootstrap as well when working with HTML. You can also learn HTML HERE, which is where I learned it.

<!DOCTYPE html>
<html>
<ol style="text-align:center; list-style-position:inside;">
<head>
  <title>Ref</title>
  <style>
    body {background-color: DarkGray;}
    h1 {color: black; font-size: 30px; font-family: 'lucida console'}    
    span {color:#443431 ; font-weight: bold; font-family: 'Courier New'}
  </style>
</head>

<body>
<h1>Ref</h1>
<form name="ref" onsubmit="return generateLink();">
    <div style="margin: 0 auto; width:500px;">

        <div style="float:left;"><span>PiCK</span><br>
            <input type="text">
        </div>

        <div style="float:left; margin-left:10px; margin-right: 10px; margin-top:40px;">
            <input type="submit"><br>
            <input type="reset">
        </div>

        <div style="float:left;">
            <span>PiCK</span><br>
            <input type="text">
        </div>
    </div>
</form>

</ol>
</body>
</html>

Answer №2

To explore a cutting-edge approach to alignment and positioning, delve into the world of CSS flexbox:

form {
  display: flex;
  flex-direction: column;
}
form > div {
  display: flex;
  justify-content: space-around;
}
form > div > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
form > input {
  align-self: center;
  margin-top: 10px;
}
h1 {
  text-align: center;
}
<h1>Ref</h1>

<form>
  <div>
    <div>
      <span>PICK</span>
      <input>
    </div>
    <div>
      <span>PICK #2</span>
      <input>
    </div>
  </div>
  <input type="submit">
  <input type="reset">
</form>

Answer №3

To align elements left and right, you can either add style attributes or define new classes in CSS.

    .left_side{
    float:left;
    margin-left:10px;
    }
    .right_side{
    float:right;
    margin-right:10px;
    }
<ol style="text-align:center; list-style-position:inside;">
    <h1>Ref</h1>
    <form name="ref" onsubmit="return generateLink();">
        <span class="left_side">PiCK</span>
        <span class="right_side">PiCK #2</span>
    <br>
    <br>
    <br>
    <input class="left_side" type="submit">
        <input class="right_side" type="reset">
    </form>
</ol>

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

RAZOR - Strip image elements from variable with HTML content

In the code snippet below, I am using a helper to display content: @Html.Raw(Model.PageData.PageContent) My goal is to filter out any image tags that may be present. I have explored methods like .substring(), but they require specific indices or string n ...

javascripthtmlcssasp.net-mvcrazor

Updating a table in Javascript after deleting a specific row

Is there a way to automatically reindex rows in a table after deleting a row? For example, if I delete row 1, can the remaining rows be reordered so that they are numbered sequentially? function reindexRows(tableID) { try { var t ...

javascripthtmlrows

How do I execute 2 functions when the button is clicked?

<button id="take-photo"> Take Image</button> <button type="submit" value="Submit" >Submit </button> How can I trigger two tasks with a single button click? 1. Executing a function based on ID Next 2. Submitting the form with ...

javascripthtml

I'm looking to customize the text displayed on the screen from my JSON file. Is there a way to hide this text?

I am currently working with a JSON data file that contains values and displays them on the screen alongside a CSS property width. However, I do not want the output to be the actual numerical data; instead, I aim to connect the JSON file so that the value s ...

jquerycssjson

What is the best method to style a child input element's placeholder using Tailwind CSS?

I'm currently working on a project and trying to translate a CSS style that targets the ::placeholder pseudo-element into Tailwind CSS. However, I have encountered some challenges during this process as I'm not entirely sure of the correct approa ...

csstailwind-css

Show Pictures Side by Side with Captions Below

I need help organizing multiple images in a row with text underneath for my college project. I've been experimenting with some code but haven't had any success yet. <div class="test"> <p> <a href="https://www.facebook.com" ...

htmlcss

Determine the current position of the cursor within a contenteditable division

I came across this code snippet on a forum to determine the cursor position in a contenteditable div, but unfortunately it consistently returns 0. Here is the function responsible for retrieving the cursor position: new function($) { $.fn.getCursorPo ...

jqueryhtmlcontenteditablecaretcursor-position

Whenever I adjust the zoom on my HTML page, it either scrolls upwards or downwards

Is there a way to prevent the page from scrolling when using zoom-in or zoom-out? I attempted using overflow: hidden in the body, but it did not work. <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

htmlcss

Looking for assistance with a straightforward CSS opacity fix for Internet Explorer

Take a look at this page comparison between chrome and IE. On the right side, you'll notice drop down fields. While Chrome displays them correctly, IE shows rectangular boxes instead. To fix this issue, I added opacity to the select fields with the ...

cssopacity

Heroku: Showcasing a unique page during the application's startup process

Would it be feasible to showcase a static HTML page while the dyno is starting up, just like how a custom page can be shown during errors or maintenance mode? The size of my app's slug is quite significant, leading to a startup time of almost 50 seco ...

htmlcssherokudyno

Create a full-page gradient background using CSS that spans the entire height of the

I need assistance with a website that features a gradient implemented through CSS like this: #grad { background: -webkit-linear-gradient(#87a0b4 80%, #6b88a1); background: -o-linear-gradient(#87a0b4 80%, #6b88a1); background: -moz-linear-gradi ...

htmlcssgradient

What is the best method to retrieve information from two tables on a webpage that have identical classes?

I am facing a challenge in retrieving or selecting data from two different tables that share the same class. My attempts to access this information using 'soup.find_all' have proven to be difficult due to the formatting of the data. There are m ...

pythonhtmlseleniumselenium-webdriverbeautifulsoup

Unexpected Visual Basic Web Label Formatting

I am facing an issue with the styling of a complex label. The CSS code doesn't always apply as expected. Interestingly, when I ran this code on two different machines, the styles were inconsistent. The code seems messy and disorganized to me, but al ...

htmlcssasp.netvb.net

Are there any other options available in JavaScript to replace the .unload() function?

I have a click event attached to multiple buttons on my page, each loading a different .php file into the same div. The issue arises when the time to load increases after several clicks. $('#start').click(function() { $('#mainbody&apos ...

javascriptphpjqueryhtml

Aligning the Bootstrap navbar to the right causes the items to shift to the left

UPDATE: The issue has been resolved. It turns out that the navbar was not extending to 100% width and reaching the edges of the screen. I am currently facing a challenge with a Bootstrap 4 navbar, similar to issues I encountered with the previous version. ...

htmlcssalignmentnavbartwitter-bootstrap-4

Tips for indicating which content to display on template literals

Utilizing template literals to showcase some fetched data, I've successfully displayed all the necessary information on the frontend. However, certain content is hidden and meant to be toggleable. Yet, I'm struggling to figure out how to link eac ...

javascripthtmlcsstemplate-literals

Cross-Origin Resource Sharing (CORS) for HTML

Here is a code snippet I found on http://jakearchibald.com/scratch/alphavid/ $("#video").append('<video id="movie" style="display:none" autobuffer><source id="srcMp4" src="https://host-away-from-host.com/file.mp4" type=\'video/mp4; ...

javascripthtmlhtml5-videocors

"Internet Explorer naturally selects the submit button when users press the enter key to submit a

In my current application, I have implemented a form with a hidden button to address issues with the numeric keyboard on Android. Essentially, pressing enter or focusing on the invisible button will trigger form submission. Pressing enter works fine in Ch ...

javascripthtmlformsknockout.js

Utilizing jQuery Mobile to tap into smartphone functionalities like camera and calling capabilities

Can mobile features like the camera and sensors be accessed from an HTML page created with jQuery Mobile? In simpler terms, is it feasible to utilize mobile features using jQuery Mobile? It's clear that I will be accessing this page on a mobile phon ...

jqueryhtmljquery-mobile

JSON Novice - persistently storing data in JSON during browser refreshes

My AJAX poll was set up following a guide found here: http://www.w3schools.com/php/php_ajax_poll.asp Instead of storing the poll entries from an HTML radio button in an array within a text file as demonstrated in the tutorial, I wanted to save them in a J ...

javascriptphphtmljsonajax