What is the best way to center the image on a page?

How can I center an image on the screen with a caption?

 <div id="team-area">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h3 class="main-title">Our Team</h3>
          <div class="container-fluid"></div>
            <img
            src="img/profile.jpg"
              class="img-thumbnail img-fluid m-x-auto d-block" width="350px">
              <div class="caption text-md-center"><em>Software Developer</em></div>
          </div>
        </div>
      </div>
    </div>
  </div>

https://i.stack.imgur.com/73yca.png

htmlcsstwitter-bootstrap

Answer №1

It appears there is an error in the image tag class. Please update m-x-auto to mx-auto.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="team-area">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h3 class="main-title">Nosso time</h3>
          <div class="container-fluid text-center">
            <image src="https://unsplash.it/200/200" class="img-thumbnail img-fluid mx-auto" width="350">
            <div class="caption text-md-center"><em>Software Developer</em></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Answer №2

To enhance the image display, you can eliminate the d-block class and incorporate the text-center class to the containter-fluid. An example is provided below for reference.

<div class="container-fluid text-center">
    <image src="img/profile.jpg" class="img-thumbnail img-fluid m-x-auto" width="350px">
    <div class="caption text-md-center"><em>Software Developer</em></div>
</div>

Answer №3

It seems there was an error in the image tag class. Please replace m-x-auto with mx-auto

Alternatively, ensure your CSS for the parent tag/div containing the image is as follows:

div img{
margin: 0 auto;
}

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

The button is not centered within the grid container

I need assistance centering the button within a Grid layout using Material-UI <Grid container style={{backgroundColor:'green'}} alignItems="center" justify="center" > <Grid alignItems="center" justify=&q ...

htmlcssmaterial-ui

The combination of two colors in a hard background fails to create an appealing aesthetic

Seeking assistance with an issue I encountered while trying to create a two-color background. Below is the code snippet: body, html { height: 100%; width: 100%; background: #0000ff; background: linear-gradient(180deg, #ff0000 50%, #0000f ...

htmlcsslinear-gradients

Issues with arranging DIV elements using CSS

I have organized a few DIVs within a parent DIV. I am trying to make them align horizontally, but despite my efforts, they remain stacked vertically. Here is the code snippet: <style> #entrycontainer { height: 100px; width: 500px; } #entry ...

csshtml

Expanding the reach of the navigation bar

Hello Everyone, Is there a way to stretch my navigation bar so that the links are evenly spaced out across the browser window instead of being clustered together? I want it to be responsive rather than fixed in size. This is my HTML code: <div class= ...

javascripthtmlcss

What are the key differences between using role and class selectors in HTML 5 and CSS3 to create two sidebars with three

My decision to eliminate all ids from my CSS and transition to HTML 5 has led me to question the use of roles in markup. In the past, IDs were used to style sidebars individually within a single selector for both. Here is an example: <div id="sidebar" ...

htmlcssselectorsidebarrole

How can I alter the text color on hover within a Material UI card? My goal is to have the text color change when hovering over the card itself, rather than just the text

When I apply CSS to the card hover effect, it works fine. However, I also want to change the text color along with the card color on hover. card: { maxWidth: 350, height: 300, '&:hover': { backgroundColor: '#373737 !impor ...

cssmaterial-uicard

Set meanmenu to a fixed position

I am currently utilizing the meanmenu plugin to create a responsive menu for mobile devices. My goal is to fix the position of the menu at the bottom of the page so that users can easily access it. However, when I set the position of the meancontainer to ...

jqueryhtmlcsspositionfixed

What is the best way to implement autoplay sound on a JavaScript webpage?

I'm currently working on a web system aimed at monitoring values from a database, and I have the requirement to trigger a sound alert when a specific range of values is received. Despite trying various examples found online, none of them have been suc ...

javascripthtml

How can I prevent a browser from caching a CSS file when the file is updated?

I have a primary layout file that is utilized in the majority of views. Within this layout, I am integrating a module using the Grails resources plugin. <r:require module="core"/> The definition of modules can be found in the conf/ApplicationResour ...

cssgrailsgrails-resources-plugin

"Maximizing the power of Jquery's .each function. What

In my jQuery code, I have the following: function lshow() { var delayt = 500; var showtime = 5000; var ArrayOfElements = ['.slogan1','.whatwedo','.ekon','.ene', '.ekol', '.sm&a ...

jqueryhtmlqueueeach

Only on mobile devices, Material-UI components spill over the screen

Update: This issue is isolated to one specific page. Other pages within the website are displaying correctly. Recently, I developed a web page using React and Material-UI. The main components utilized are Grid and Container. While the layout appears fine ...

javascripthtmlcssreactjsmaterial-ui

How does an iOS device typically manage the :hover pseudo-class?

My div is designed to expand when clicked using jQuery $('.mydiv').click, and collapse with a second click. In addition, the same div showcases more information on hover due to CSS rules utilizing :hover. This feature works perfectly on a comput ...

javascriptioscsscss-selectorspseudo-class

Positioning elements within a Bootstrap column: Fixed versus Absolute positioning

Striving to maintain the absolute positioning of the right column as users scroll through the left column has proven to be a challenging task. Despite exploring various solutions from stackoverflow and google, none seem to effectively address this issue. ...

htmlcsstwitter-bootstrapreactjs

Unusual CSS behavior discovered while implementing horizontal scrolling navbar with overflow-x

I've been working on a navbar that will scroll horizontally when it exceeds the width of its parent container. It features a bottom border with a different color for the active link. Using a negative margin to overlap them works well, but as soon as ...

htmlcss

What steps can I take to ensure the browser only shows the page once it has completely loaded?

I find it frustrating when webpages load slowly and you can see the process happening. In my opinion, it would be more satisfying to wait until everything is fully loaded - scripts, images, and all - before displaying the page. This brings up two questio ...

javascriptcss

Python Selenium not registering button click

I'm working on scraping data from the website using Python with Selenium and BeautifulSoup. This is the code I have: driver = webdriver.Chrome('my file path') driver.get('https://www.ilcollege2career.com/#/') first_click = Web ...

javascriptpythonhtmlpython-3.xselenium

Having issues with the functionality of the Previous/Next button in my table

I am facing a challenge with my table as I am trying to include previous/next button for users to navigate through it. However, the interaction doesn't seem to be functioning properly, and I suspect that I need to establish a connection between the bu ...

javascripthtmlcss

Unable to override default styles with custom styles in React MUI 5

I've been attempting to replace the default MUI 5 Button styles with my custom styles using either withStyles or a className (created using makeStyles), but I'm running into an issue where the default styles take precedence over my custom ones. I ...

cssreactjsmaterial-uimakestyles

Tips for managing media queries in HTML emails on Gmail

When sending out my website's responsive HTML emails, I utilize media queries to ensure optimal display. However, I have noticed a discrepancy in how Gmail/Inbox interprets the max-width parameter in the media query. Instead of referencing the HTML em ...

htmlemailgmailmedia-queriesinbox

Issue with box shadow appearing incorrectly as element content increases in size while the body has an image background

After applying a box shadow to the header div, I noticed that the box shadow doesn't display properly when the hidden elements within the header are revealed. <div id="header"> <div id="logo"> <a href="#"><img src="logo.png" ...

javascriptjqueryhtmlcsshtml5boilerplate