Achieving precise vertical alignment using a powerful jquery plugin

I recently experimented with using the particle ground plugin in my latest project.

Unfortunately, I am encountering an issue with the vertical alignment of the content inside.

You can view an example of this problem on jsfiddle.

<div id="particlebg">

        <div class="container">
          <div class="row">
            <div class="col-sm-12 home-title">
              <h1>An illustration of vertical alignment</h1>
              <h3>An illustration of vertical alignment</h3>
              <button class="btn-lg btn-alt">Download</button>
            </div>
          </div>
        </div>

      </div>  <!-- end #particlebg -->

If anyone has a solution or suggestions on how to address this issue, please let me know.

Your help is greatly appreciated. Thank you in advance!

jquerycsstwitter-bootstrap-3vertical-alignment

Answer №1

#background {
    position: relative;
    height: 350px;
    margin-bottom: 50px;
    background: red;
    overflow: hidden;
}


#background .row  {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 1.2em;
}

Here is the modified code you requested.

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

CSS positioning alignment

Could someone please explain to me why changing the position to relative causes the "facebook and Facebook helps you connect and share with the people in your life" text to display at the top of the page? I've only been studying CSS for three days. Th ...

htmlcssfrontend

Issue with ajax when trying to return a String value

In my Java project, I have implemented the following jQuery code: $(document).ready(function(){ $('#searchBid').click(function(){ alert("reached ajax"); $.ajax({ url: "/fetchbookingnumber", data: {id:$ ...

javajqueryajax

Utilizing AngularJS to dynamically apply CSS classes based on the $index value

Is there a way to style my div based on the ng-repeat index, applying different styles for odd and even rows? The row with an even index should have all classes specified for the odd one plus additional classes. Controller: var odd = { 'class1&apos ...

javascriptcssangularjs

Button activated on second click

As I am working on a project, I encountered an issue with two buttons and one input field. The input field is supposed to take the value of the clicked button, but currently, the function works only after the second click on the button. I have tried using ...

javascriptjqueryvue.js

Exclude the file directory from the JavaScript output

This is what I currently have. The output that I receive is C./FAKE PATH/(value). What I actually want is just to display the value without including the C./FAKE PATH/. $('#inputid').change(function(){ var value = $(this).val(); alert(value) ...

javascriptjquery

Exploring the process of Vue managing events for dynamically generated jQuery buttons

As I go about creating action buttons for each individual row within a table using the jQuery $.each() method, I've encountered an issue with the v-on:click="delete" event handling not functioning properly when the buttons are clicked. Interestingly, ...

jqueryvue.js

Dropdown does not populate with data

HTML content <select class="form-control" tabindex="-1" id="superId" name="superId[]" multiple="multiple" required="required" data-bind="options: SupArray, optionsText: ' ...

javascriptjqueryhtmlajaxknockout.js

Don't forget to keep track of when the user has closed

How can I ensure that the cache retains the user's action of closing the div? Currently, when I close the div and refresh the page, it reverts back to its original state. Is there a way to make this change persistent? Experience it live: Here is the ...

javascriptjqueryhtmlcsscaching

Issue with the footer not remaining at the bottom of the page

I'm in the process of updating my website and have come across an issue with the footer placement on one specific page. Typically, the footer stays at the bottom of all pages except for this particular page where it appears floated to the left instead ...

htmlcss

Implementing AJAX to Invoke JavaScript Function in Code-Behind

Currently, I am considering developing an asp.net user control to manage various modal popups such as error handling, forms, and dialogs. In a previous project, I placed the user control in the top master page so it could be accessed by all content pages. ...

jqueryasp.netajaxuser-controls

sliding effect of the background image

Currently, I am in the process of creating a navigation system that includes a background image slide effect. My goal is to mimic the design of a specific website: http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/ However, my challenge lie ...

javascriptjqueryhtmlcss

What is the method for calculating values entered into dynamic input fields?

I am facing a slight issue with my HTML form code... Within my code, there are several input fields that are being generated dynamically. Each dynamic input field contains a numerical value which I need to use for mathematical calculations. The calculati ...

javascriptjqueryhtmlarrays

I'm currently troubleshooting why the radio buttons in my form seem to be coming up as undefined

I am currently working on a form and trying to validate it using my own code. Even though I can successfully retrieve values for radio buttons by triggering an alert when clicked, the form validator keeps returning these radio values as undefined. What cou ...

jqueryhtmlformsvalidation

What is the process for incorporating a full-page blog into a blog preview?

I customized a template, but there is a blog section within the div that I am struggling to replicate. Here is the test website for reference: Below is the HTML code for the blog section: <!-- Blog Start --> <section class="section bg ...

javascriptphphtmlcss

Ensure the validation of the form using jQuery and then proceed with submitting the form

My markupcode is structured as follows: <div> <form action="http://fileaction.com"> <label for="email">Email:</label> <input type="text" name="email" id="login-email" class=""> <label for="password">Passwo ...

jqueryformsvalidation

Creating an interactive date selection feature with a calendar icon in MVC 5

I currently have a textbox that displays the datepicker when clicked. However, there is now a requirement to add a calendar icon inside the textbox. The datepicker should be displayed when either the calendar icon or the textbox is clicked. Below is the co ...

javascriptjqueryhtmlcssdatepicker

Is it necessary for an embedded YouTube video to automatically play with sound?

My current project involves developing a Web Application where the client has specified that videos must autoplay with sound when a user visits it. Here is a snippet of what I have implemented: HTML: <embed id="video1" src="" wmode="transparent" type= ...

javascriptphpjquerygoogle-chromeyoutube-api

What is the correct way to effectively refresh an included PHP file?

As a novice in the programming world, I've encountered yet another challenge that I hope you can assist me with. Here is the HTML code I'm currently working with: <div class='hold'><?php include 'image.php'; ?>< ...

phpjqueryhtml

Combine values in CSS without any spacing

Currently, I am attempting to create a LESS mixin that can take a numerical value (degrees for rotation) and generate the appropriate CSS code to rotate an element. However, I am facing difficulties trying to handle both "270deg" and the integer "3" (which ...

cssless

Exploring Jstree's renaming feature

My jstree script's 'rename node' function isn't working, and I'm not sure why. Here is the code I'm using: $(function () { $("#stworz_powiazanie").click(function () { $("#pages-wrapper").jstree("create"); }); ...

jqueryjstree