Center the HTML elements on the page

After struggling for some time, I can't seem to figure out how to center elements in the middle of a page without having a lengthy navigation bar at the bottom of the screen. Does anyone have any suggestions?

https://codepen.io/picklemyrickle/pen/XWjzyvb

#h2 {
  position: absolute;
  width: 100%;
  left: 40%;
  margin-top: 60px;
}

#form {
  position: absolute;
  top: 50px;
  left: 10px;

}

#benefits {
  position: absolute;
  left: 40%;
  margin-top: 160px;
}
<section id="h2">
  <h2>Daniel's Get lean plan</h2>

  <form id="form"
  action="https://www.freecodecamp.com/email-submit">
    <input type="email"
         id="email"
 placeholder="Enter your email here"
       name="email"> 
    <input type="submit"
         id="submit">
  </form>
</section>

I'm new here and excited to learn and improve my skills. If you have any advice or tips, please feel free to share. Thank you!

Looking forward to hearing from you!

htmlcsselementcentering

Answer №1

After making some adjustments, I incorporated flexbox functionalities into your code

body {
     display:flex;
     flex-flow: column;
     width:100%;
     height: 100vh;
     align-items: center;
     justify-content: center;
}
#h2 {
  display: flex;
  flex-flow: column;
  justify-content:center;
  align-items: center;
  width: 100%;   
  height: 100%;
}
<section id="h2">
    <h2>Daniel's Get lean plan</h2>
    
  <form id="form"
    action="https://www.freecodecamp.com/email-submit">
   <input type="email"
           id="email"
   placeholder="Enter your email here"
         name="email"> 
   <input type="submit"
           id="submit">
  
    </form>
  </section>

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

Show the jQuery code block as HTML within a textarea

I'm in need of a way to display script reference code in a textarea for easy copying by users. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"/> Even though I am using jQuery, all the solutions I ...

jqueryhtmlinnerhtml

PhoneGap nested executeSql not functioning properly on iPad Simulation

My application seems to be working perfectly in Win-Safari, but encounters issues when wrapped by PhoneGap. Below is the code snippet: // working db connection db.transaction(function(tx) { tx.executeSql('SELECT * FROM tbl', [], function(tx, r ...

jqueryipadhtmlsqlitecordova

Is it possible to establish a standard view for the date/time input field, disregarding the user's

When working with a Django Form, I am incorporating a datepicker. While the solution may involve JS and HTML, my query remains specific. date_field= forms.DateField( input_formats=['%Y-%m-%d'], widget=forms.DateInput( format=& ...

javascripthtmldjangodjango-formsdatepicker

Ways to implement a parallax effect by changing images within a specific div on scrolling with the mouse

First and foremost, thank you for taking the time to review my question. I am currently developing a website and I need to implement a vertical image transition effect within a selected division, similar to a parallax effect. Within this div, there are 3 ...

javascriptjqueryhtmlcss

Is it possible to include two of these on a single page with unique variables? (Using JQuery)

I am looking to create two similar pages, each with different percentages. However, when I try modifying the JS or changing class/ID names, it keeps pulling data from the first SPAN element. http://jsfiddle.net/K62Ra/ <div class="container"> <di ...

javascriptjqueryhtmlcss

Dynamically linking tabbable tabs is a useful technique that allows for

I have been working on an app that organizes websites into groups displayed as tabs in a tabbable navigator using Twitter Bootstrap. The idea is that each time a new group is added, a new tab should appear. Currently, this is how it looks: The functionali ...

javascripthtmlcsstwitter-bootstrapangularjs

How can I programmatically adjust the center of a Google Maps v3 map?

I have a table with 2 columns. The first column contains a div with a Google map, while the second column has a panel that changes its width after a few seconds. On the map, there is a marker placed. Issue: When I click on a button that triggers setCente ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Passing dynamic scope from Angular to a directive is a seamless process

I am working with a directive that retrieves an attribute value from an http call in the following manner: Controller app.controller("HomeController", function($scope){ $http.get("/api/source").then(function(res){ $scope.info = res.data }); }); ...

javascripthtmlangularjs

Utilizing React Material UI to divide the screen in half with one half being scrollable and the other half remaining fixed using UI Grid

My setup involves two Grid components, with one structured like this: <Grid container alignItems="stretch" spacing={3}> <Grid className="left-pane" item md={4} xs={12}> <Navigation /> </Grid> <Grid className="right-pan ...

cssreactjsmaterial-ui

Is it possible to use JQuery to trigger a click event on text inside

Trying to implement a JQuery method that triggers when the code below is clicked: <div class="content_sub_list"> <img src="/imgs/close-icon.jpg" class="exit_sub_list"/> hello </div> The current JQuery code in use: $(document).r ...

javascriptjquerycsshtml

There are two separate CSS files linked to the same page, but the browser is only rendering the styles from

I am in the process of developing a new web page where I want to implement my own CSS and incorporate some components from this source: . I'm facing an issue with one of the components, as the browser seems to be applying only the styles from my custo ...

htmlcss

A helpful tip for those working with jQuery or WordPress PHP: Use a script that calculates the number of characters in a text, identifies the last space, and replaces everything after

Is there a way to restrict the amount of text shown within a div sourced from a WordPress Custom Field? <?php $textcount = strlen(get_field('custom_quote')); ?> <?php if ( $textcount > 250 ) : ?> <?php the_field('custom ...

phpjquerycsswordpresscharactercount

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Hi there! I hope you're doing well! I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example: import { Butto ...

cssreactjstypescriptnext.jstailwind-css

What is the best way to position the bottom block?

I'm trying to create a template that looks like the image below: https://i.sstatic.net/m6q0s.png I managed to position the top square correctly, but I'm having trouble aligning the bottom one - I can't seem to move it to the bottom left co ...

htmlcss

What is the best method for retrieving the entire row data based on the maximum value in a column?

function findMaxValue() { var highestValue = Math.max.apply(Math, $('.sira').map(function() { return $(this).text() })) alert(highestValue); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"& ...

javascriptjqueryhtml

Deciding whether to use Device WebView Kit or HTML for your project is

I am a bit confused about creating a website for mobile devices. If I have a specific webpage in mind that I want to target towards mobile devices, do I need to use the native webview kits provided by iOS, or can I simply code in HTML, PHP, Javascript, an ...

androidhtmlios

Ways to remove all HTML elements from a string

Check out the code that I currently have: I am looking for a way to prevent users from entering any HTML tags in the "Add Responsibilities" field. For example, if a user enters the following: <div>Test</div> It should only display the text l ...

javascriptjqueryhtml

Is there a simpler method to access the source element for an event?

I'm just starting to learn JavaScript and jQuery, and right now I have the following code in my HTML: <a id="tog_table0" href="javascript:toggle_table('#tog_table0', '#hideable_table0');">show</a> After that, I hav ...

javascriptjqueryhtmleventsdom

Footer refuses to stay anchored at the bottom of the page

I'm struggling to keep my footer at the bottom of all pages on my blog. I am facing two main issues. If I use position:absolute, the footer ends up in the middle of the main blog page. Alternatively, when I don't use it, the footer sticks to the ...

htmlcssblogstumblr

What could be causing the svg to not be visible inside the div?

I am struggling to display an SVG element within a div as it is not visible at all. Can someone help me make the SVG visible in the div? Here is a link to the code: http://codepen.io/helloworld/pen/HjkhK <div style="height:100px;background:yellow;"> ...

htmlcsssvg