Strange Behavior of an Image in the Center

I've utilized CSS to center my image.

.center-block{
margin-left:auto; 
margin-right:auto;
}

When I apply this code, it centers the images in a strange way. Here is my HTML & CSS code . You can see the image below to understand what the issue is.

In simple terms, I want both images to be perfectly centered on the screen.

Keep in mind, I'm using Bootstrap V4, so I can't use the bootstrap class center-block, I have my own version.

https://gyazo.com/6b0846f84f5fb064ca4dce5ed701e470

Thank you for taking the time to read this, James.

body {
  margin: 0;
  background: #000;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url('../images/backgroundimage.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

.fourms {
  padding-right: 0px;
  margin-left: 0px;
}

.center-block {
  margin-left: auto;
  margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Portal</title>

  <!--Bootstrap4 JS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

  <!--Bootstrap4-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  <!--Styles-->
  <link rel="stylesheet" type="text/css" href="css/main.css">

  <!--FontAwesome-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

  <!--Font-->
  <link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />

  <!--Animate.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

  <!--Jquery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <div class="container-fluid">

    <!-- FullScreen Video Using HTML5-->
    <div class="fullscreen-bg">
      <video loop muted autoplay poster="images/backgroundimage.jpg" class="backgroundvideo">
                    <source src="images/backgroundvideo.webm" type="video/webm">
                    <source src="images/backgroundvideo.mp4" type="video/mp4">
                    <source src="images/backgroundvideo.ogv" type="video/ogg">
                </video>
    </div>

    <!--Epic Audio Background Using HTML5-->
    <audio autoplay loop id="myaudio">
                <source src="audio/epicaudio.mp3" type="audio/mpeg">
            </audio>


    <div class="row icons">

      <!--Fourms Icon-->
      <div class="center-block">
        <div class="col-xs-4">
          <a href="fourms"><img src="images/Forums-1.png" alt="Fourms" style="width:142px;height:142px;border:0;"></a>
        </div>
      </div>

      <div class="center-block">
        <div class="col-xs-4">
          <a href="fourms"><img src="images/Forums-1.png" alt="Fourms" style="width:142px;height:142px;border:0;"></a>
        </div>
      </div>


    </div>


  </div>


  <!--JavaScript for lowering Volume in EpicAudio-->
  <script>
    var audio = document.getElementById("myaudio");
    audio.volume = 0.1;
  </script>

</body>

</html>

csshtmltwitter-bootstraptwitter-bootstrap-4

Answer №1

A simple solution is to apply the .justify-content-center helper class directly to the .row element to center its children.

body {
  margin: 0;
  background: #000;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background: url('../images/backgroundimage.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}

.fourms {
  padding-right: 0px;
  margin-left: 0px;
}

.center-block {
  margin-left: auto;
  margin-right: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <title>Portal</title>

  <!--Bootstrap4 JS--<
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

  <!--Bootstrap4--<
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  <!--Styles--<
  <link rel="stylesheet" type="text/css" href="css/main.css">

  <!--FontAwesome--<
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

  <!--Font--<
  <link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />

  <!--Animate.css--<
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />

  <!--Jquery--<
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>

<body>
  <div class="container-fluid">

    <!-- FullScreen Video Using HTML5-->
    <div class="fullscreen-bg">
      <video loop muted autoplay poster="images/backgroundimage.jpg" class="backgroundvideo">
                    <source src="images/backgroundvideo.webm" type="video/webm">
                    <source src="images/backgroundvideo.mp4" type="video/mp4">
                    <source src="images/backgroundvideo.ogv" type="video/ogg">
                </video>
    </div>

    <!--Epic Audio Background Using HTML5-->
    <audio autoplay loop id="myaudio">
                <source src="audio/epicaudio.mp3" type="audio/mpeg">
            </audio>


    <div class="row icons justify-content-center">
      <!--Forums Icon-->
      <a href="forums"><img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="Forums" style="width:142px;height:142px;border:0;"></a>
      <a href="forums"><img src="http://kenwheeler.github.io/slick/img/lazyfonz2.png" alt="Forums" style="width:142px;height:142px;border:0;"></a>
    </div>


  </div>


  <!--JavaScript for lowering Volume in EpicAudio-->
  <script>
    var audio = document.getElementById("myaudio");
    audio.volume = 0.1;
  </script>

</body>

</html>

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

Remove each notification automatically in JavaScript after a specified period of time

I'm currently developing a basic notification system. Check out the jsfiddle I created here: https://jsfiddle.net/t9pvmzhh/3/ For some reason, jsfiddle is not showing all 4 notifications even though they display correctly on my end. I suspect there ...

javascripthtmlcss

Creating a custom progress bar using Javascript and Jquery

I developed a progress bar that is fully functional. Here is the HTML structure: <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style ...

javascriptjqueryhtmlajaxprogress-bar

Retrieve PHP variable from a PHP CSS file

I'm facing an issue where I am unable to retrieve a PHP variable from a CSS file that is loaded in this manner from my index.php: <link href="css/style.php" rel="stylesheet"> Within the style.php file, the code looks like this: <?php heade ...

phpcssvariables

Customizing the size of an SVG shape using CSS properties

I am having trouble adjusting the width of the icon to 100% of the SVG container. This is what I've encountered: And here is the code for the SVG icon <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w ...

htmlcsssvgcss-shapes

How can I conceal the contents of a webpage until the entire page has finished loading before revealing them?

Is there a way to delay displaying my login template until all elements are fully loaded? Currently, when I visit the site, the template appears first followed by fonts and other components. I want to ensure that nothing is shown to the user until the enti ...

javascripthtmlfunctionclassvue.js

Can the system automatically generate and display a new user ID right after a form is submitted?

Once users have submitted the basic information in a form, how can I ensure that the newly created userID is displayed in a hidden field on the header page? The initial form collects Name, Phone, and Email details. Upon submission, the 'userID' ...

phphtmlformsmysqliecho

What is the best way to create a @mixin incorporating variables to easily reference breakpoints using custom aliases?

Currently in the process of constructing a website using SASS coding, I have created several @mixins for Media Queries that will be utilized later with the @include directive. The structure of these mixins is as follows: _standards.sass // Media queries @ ...

csssass

Checking with jQuery Validate: displaying an error message if input matches a certain value

I spent 6 hours trying to figure out a solution to my issue. Currently, I am utilizing the jQuery Validation plugin. In my form, there is a password input field. When an AJAX request detects an incorrect password, another input field is set to a value of ...

javascriptjqueryhtmlajaxvalidation

Dynamically switch between showing more and showing less content on each div

Whenever the specific show more button is clicked, the content should be displayed without causing the entire component to re-render. I have tried using a useState, but each time the button is clicked, the whole component re-renders, resulting in long load ...

javascriptcssreactjsbootstrap-4material-ui

Identify the row containing a value of null using jQuery (functionality not performing as anticipated)

Whenever the user clicks on the GetData button, I retrieve JSON data and display it in an HTML table similar to the demo below. Demo: https://plnkr.co/edit/I4XYY6CZohf7IS6wP8dR?p=preview There are instances where the value can be null, such as the loanNu ...

javascriptjqueryhtml

The issue of the JQuery method failing to function properly on a button arises when the button is added

Upon loading a HTML page containing both HTML and JavaScript, the code is structured as shown below: <button id="test"> test button </button> <div id="result"></div> The accompanying script looks like this (with jQuery properly in ...

javascriptjqueryhtmlajax

Why do I keep getting an ExpressionChangedAfterItHasBeenChecked error after trying to update a random color in an

Is there a way to assign a random color from an array without causing the error message: "ExpressionChangedAfterItHasBeenChecked"? Even though the color of the chip changes quickly before the message appears, it seems like it's working. How can I reso ...

javascripthtmlarraysangulartypescript

Ensure the column breaks before the element without disrupting the wrapper in CSS

My objective is to always initiate a line break before a specific element, in this case, the h2 tag: https://i.sstatic.net/fy80H.png https://jsfiddle.net/hv0sm40o/3/ html <div class="columns"> <h2>Jelly pastry chocolate cake pastry</h2&g ...

htmlcsscss-multicolumn-layout

Content is not being contained within a div container

I'm facing a unique issue that I've never encountered before - text is not wrapping inside a div element. Here's a snippet of my HTML code: http://jsfiddle.net/NDND2/2/ <div id="calendar_container"> <div id="events_container"& ...

cssword-wraphtmltext

"Learn how to create a scrolling div using a combination of CSS and JavaScript with absolute and relative

After relying solely on "pre-made" components like Mui or TailWind, I decided to create a component using only CSS and maybe JavaScript. However, I encountered some difficulties when attempting to position a div inside an image using relative and absolute ...

javascripthtmlcssscroll

Tips for using various versions of jQuery at the same time

Despite searching on Stack Overflow, none of the answers provided seem to work for my issue. My requirement is to utilize two separate versions of jQuery. Below is the code snippet: I first link to the initial version and use the following code: <sc ...

javascriptjqueryhtml

Angular 2 Dropdown Multiselect Plugin - Fully Customize Width to 100%

Currently working on integrating the angular-2-dropdown-multiselect component: https://www.npmjs.com/package/angular-2-dropdown-multiselect The component functions correctly, but I am looking to adjust its width to fit the container... I believe simply ...

csstwitter-bootstrapangular

What is the best way to measure the timing of consecutive events within a web browser, utilizing JavaScript within an HTML script tag?

Currently delving into the realm of JavaScript, transitioning from a Java/Clojure background, I am attempting to implement a basic thread-sleep feature that will display lines of text on the screen at one second intervals. Initially, I considered using t ...

javascripthtmlsettimeoutsetintervalthread-sleep

Increase ng-grid row height dynamically based on content without any external plugins or reliance on jQuery

I came across a similar question on this topic at Angular ng-grid row height However, none of the solutions provided there meet my requirements. If I use CSS to fix the issue, it impacts the page's responsiveness and disrupts ng-grid's header fu ...

javascriptcssangularjsng-gridrow-height

modify data when parsing a file / utilizing loops in shell scripts

I have a log file that has the following format, <tr><td>AAA-application-01 <br> Quality_gate_failed_reason:xxxxxxx </td></tr> <tr><td>AAA-application-02 <br> Quality_gate_failed_reason:xxxxxxx </td>&l ...

htmllinuxbashloopsshell