How to align an image in the middle using Bootstrap and React

Having an issue with Bootstrap and aligning an image in the center. Currently, the image is appearing left-aligned:

Here is the HTML:

<div className="App vh-100">
  <div className="d-flex h-70 border border-white container">
    <div class="py-5">
      <div className="text-center">
        <img src={logo} className="esc-logo slide-top center-block" alt="logo" />
      </div>
    </div>
  </div>
  <div class="container h-auto">
     <h1>test</h1>
  </div>
</div>

And the CSS:

.App {
text-align: center;
background-color: #1e0933;
background-image: url(url);
background-attachment: fixed;
background-size: cover;

}

.esc-logo {
  height: 40vmin;
}

Need some help figuring out what's wrong. Can anyone assist, please?

Appreciate any assistance, hug0

htmlcssreactjsbootstrap-4

Answer №1

The challenge lies in the centering of the image. The issue stems from the fact that the DIV with class py-5 is not taking up the full width, hence there is insufficient space for the image to be centered.

To address this, a quick fix was implemented by adding style={{width: "100%"}} to the DIV with class py-5, which resulted in the successful centering of the image.

Here is an example illustrating the solution:

import React from "react";
import 'bootstrap/dist/css/bootstrap.css';
import "./styles.css";

export default function App() {
  return (
    <div className="App vh-100">
      <div className="d-flex h-70 border border-white container">
        <div className="py-5" style={{width: "100%"}}>
          <div className="text-center">
            <img
              src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16fb061b0aa%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16fb061b0aa%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.421875%22%20y%3D%22104.65%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
              className="esc-logo slide-top center-block" alt="logo"
            />
          </div>
        </div>
      </div>
      <div class="container h-auto">
        <h1>test</h1>
      </div>
    </div>
  );
}

Check out the live demonstration here

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

Methods for concealing the title and date when printing web content using JavaScript

When utilizing the window.print method to print out a specific screen, I encountered an issue. I need to hide the date in the top left corner of the image as well as the title (not the big heading) which has been intentionally blurred. I've come acro ...

javascriptcssvue.js

Sorting by price using the ng-repeat directive is not suitable for this

Utilizing angular's ng-repeat along with orderBy on a product catalog page to sort the products based on a select change. The ordering by name using orderBy works as expected, however, when it comes to price it sorts like this: 1,10,11,12,13,14,2,3,4 ...

javascripthtmlangularjsangularjs-orderby

Django and its compatibility with modal windows

I have developed a Django website that includes multiple items in a "for" loop. I need to delete a specific item by opening a modal window and passing the post ID (referred to as "get_post_id") to the modal window. However, I want the modal window to exist ...

javascriptpythonhtmlcssdjango

Creating a continuous loop in JQuery when clicking on a table row

I seem to be encountering an issue with what appears to be an infinite loop. My problem arises while trying to create a table dynamically using Ajax. Each row of the table contains a button alongside a thumbnail image and some text. I wish for the button ...

javascriptjqueryhtmlajax

Is there a way to select only a single line from an HTML document?

Is there a way to extract just one specific line from an HTML file? Let's say we have the following file: <!DOCTYPE html> <html> <head></head> <body> This is a test string. This is another test st ...

javascriptphphtml

Version 4.0.1 update has caused create-react-app to stop functioning

After attempting to install create-react-app with different methods such as npm i create-react-app, npx create-react-app new-app, and npm init react-app new-app, I consistently encounter the following error message: The version of create-react-app instal ...

reactjsnpmcreate-react-appnpm-installnpx

Using null values instead of dates in Chart.js can lead to crashing issues within the browser

https://i.sstatic.net/34NRP.pngUtilizing the chart.js library to display time on the X-axis and its corresponding Y-axis value. I encountered a problem where passing a null value for x causes the browser to crash. Strangely, if all x values are null, it wo ...

reactjschart.js

What is the best way to add a custom color to a blank div that is designed with the Bootstrap grid system?

Let's analyze this scenario <div class="row"> <div class="col-md-3 col-sm-3 col-xs-3"></div> <div class="col-md-6 col-sm-6 col-xs-6"></div> <div class="col-md-3 col-sm-3 col-xs-3"></div> </div& ...

htmlcsstwitter-bootstrap

The Bootstrap grid system seems to be malfunctioning as the columns are unexpectedly stacking up

Currently, I am working on familiarizing myself with Bootstrap, and I am interested in creating a simple layout with three columns in one row. Below is the code that I have been using, which I copied from an example in the Bootstrap Documentation. <!D ...

cssgridbootstrap-4system

Counting Clicks with the Button Counter

I'm having an issue with my jQuery code that is supposed to count button clicks - it stops after just one click. I need help fixing this problem. $(function() { $('.btn').click(function() { $(this).val(this.textContent + 1); }); } ...

javascriptjqueryhtml

"Safari is not displaying the element's height correctly when set to 100

I am facing an issue where I have a child div vertically centered under a parent div with a specific height. The child div is assigned the height:100% property, but it seems to be not working correctly on Safari only. To see more about this problem, you ca ...

cssmacossafariheight

Display only the div on an iPad screen

Is there a way to show this DIV only on an iPad screen? I've looked around on Google for solutions, but none of them seem to work. It always ends up displaying on my computer as well. Is it possible to make it show only on an iPad screen? @media only ...

cssipad

Guide on altering the cell's background hue depending on its value through javascript

I'm dealing with a table that has 3 columns: field1 is a Category field2 and field3 contain Measures (specifically integers 1, 2, 3, 4, and 5). Is there a way to use Javascript to conditionally format the background color of cells in the table hol ...

javascriptphphtmlcssformatting

Default value in Material UI textField unable to display

This issue arises when using an updated form textField. Initially, data is fetched using the toDo id. const [toDo, setTodo] = useState<any>({}); useEffect(() => { axiosConfig .get(`/todo/${todoId}`) .then((response) => { setTodo(respons ...

reactjsformsmaterial-uitextfielddefault-value

Why won't the audio tag play any audio on IE10 Windows7?

Encountering issues with the audio tag on Internet Explorer 10/Windows 7. Discovered a test page where IE is unable to display any audio tags. Interestingly, when the file is saved and tested locally, it works perfectly (see image below). Confirming that ...

htmlaudiointernet-explorer-10

Tips for enhancing the appearance of the dropdown scrollbar in PrimeNG

Just started exploring Angular and I've been struggling to customize the scrollbar on a PrimeNG dropdown. Does anyone have any tips or tricks to achieve this? Here is the HTML code: <p-autoComplete placeholder="- Select -" (onSelect)="onSelect(dh ...

htmlcssangularprimeng

Is Next.js considered a single-page application or an SPA?

Traditional React applications are commonly referred to as Single Page Applications (SPAs) because they typically consist of only one html page, the index.html. However, Next.js differs from this convention. So, is it accurate to label a Next.js applicat ...

reactjsnext.js

Encountering a React.js page not found error upon refreshing or when clicking a link directly

I am currently working on a React project hosted at the following link: . When you scroll down, you will come across a section labeled "PRODUCT CATEGORIES". If you click on one of the categories, such as https://i.sstatic.net/QDHh2.png, it should take you ...

reactjsreact-router

Enhancing the functionality of the onclick function within the ng-repeat by incorporating a scope

I am looking to pass a parameter to a function that is called via onclick within an ng-repeat: <!-- Sliding bar (bottom) --> <div ng-show="currentSVG && currentLanguage && currentWidth && bannerHeight" pageslide ps-open=" ...

javascripthtmlangularjsonclickangularjs-ng-repeat

Avoid navigating through hidden tab indexes

Below is the HTML code that I am working with: <span tabindex="19"> </span> <span tabindex="20"> </span> <span tabindex="21"> </span> <span id="hidden" tabindex="22"> </span> <span tabindex="23"&g ...

javascriptjqueryhtml