Centered perfectly in a bootstrap card

I'm struggling to create a bootstrap card with a logo perfectly centered, but the logo seems fixed at the top. How can I fix this issue?

<div class="col-xl-3 col-md-6">
    <div class="card mini-stat">
        <div class="card-body text-center" style="height:10em">
          <img src="public/assets/images/entrylogos/chromebook.png" class="card-img-top">
        </div>
    </div>
</div>

The following CSS class may be helpful:

.card-img-top {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
}

Any assistance would be greatly appreciated! Thank you in advance :-)

htmlcssbootstrap-4

Answer №1

I modified the image width to 50% and it worked like magic for me because of the logo I used. Perhaps you should reconsider your width and height settings to find what best complements your logo.

.card-img-top { 
                max-width: 50%;
                max-height: 50%;
                object-fit: contain;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%); }

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

"Struggling with vertical alignment in my scenario, any tips on how to achieve

I'm trying to vertically align my texts while ensuring that the green background div covers the entire height of the red color div. Right now, the green div only covers 90% of the red div and I'm not sure why. Can someone please explain what&apos ...

htmlcss

What is the best way to assign a percentage width based on a variable in jQuery?

Is there a way to assign a dynamic width value to an element? Here is the code I am using: $(".menu_list_item").css({ width: width + "%" }); Unfortunately, this doesn't appear to be functioning correctly. If anyo ...

javascriptjquerycss

When utilizing PHP Form Validation alongside Javascript, the validation process does not halt even if a

I have been grappling with creating a basic HTML form validation using Javascript After experimenting with various examples, I am still facing the issue of my index page loading upon clicking the button on the form. Despite including "return false" in wha ...

javascriptphphtml

What can be done to prevent parallel images from getting displaced while using CSS3 transformation effects?

Currently facing an issue where three separate images are being transformed using CSS3 upon hover. Various attempts have been made, including placing them in divs, a table, or just plain images. Trying to float them all in one direction, with #1 left, #3 ...

css

Guide to Designing a Three-Column Layout Using Only CSS

I'm currently facing an issue with the alignment of the content section on my webpage which consists of three columns. The DIVs are not floating as expected. Below is the code I am using: <div id="content"> <asp:ContentPlaceHolder ID="Ma ...

htmlcssxhtmlcss-float

JQuery table sorter is unable to effectively sort tables with date range strings

I am facing an issue with sorting a column in my table that contains text with varying dates. The text format is as follows: Requested Statement 7/1/2014 - 9/16/2014 When using tablesorter, the sorting does not work properly for this column. You can see ...

javascriptjqueryhtmltablesorterstring-comparison

Error Starting Bootstrap 4 with NPM

I am currently in the process of learning how to automate various tasks related to web development using npm scripts. Displayed below is the contents of my package.json file: { "name": "confusion", "version": "1.0.0", "description": "This particula ...

npmbootstrap-4npm-scripts

Obtain data using a REST request from a webpage or web server

Is it possible to extract the last status value from a delivery courier's webpage by sending a tracking number request using PHP? I have found some helpful information, but I am unsure if it is possible to extract only specific values from the result ...

phphtmlrestapi

Obtain the full HTML code for a Facebook album

I am attempting to extract the HTML code from a Facebook album in order to retrieve the photo links. However, since not all photos load at once, cURL only retrieves the links of photos that are initially loaded. Is there a way to fetch the entire loaded H ...

phphtmlfacebookcurl

Following the build in Angular, it only displays the index.html file and a blank screen

According to the information on Angular's official website, running the "ng build" command should generate files in the dist folder ready for hosting. However, after running this command, the index.html file is empty except for the page title. When yo ...

htmlangulartypescriptweb

Maintain the selected image

I am working on a program that allows users to choose images and I have given them the pseudo-class. .my_image_class:hover{ border:3px solid blue; -webkit-box-sizing: border-box; } This makes the images bordered in blue when hovered over, giving a "sele ...

javascripthtmlcss

Unable to get spacing correct on loading page

My attempt at creating a loading page using CSS and HTML has hit a roadblock. I'm trying to show a loading bar that ranges from 0% to 100%. Despite my use of justify-content: space-between, I can't seem to get it right. I've searched through ...

javascripthtmlcsssass

Simple Timer App with Vanilla JavaScript

Hey there! I am a newcomer to JavaScript and recently joined the stackoverflow community. Currently, I am working on a project called Pomodoro Timer with the goal of creating something similar to this example: http://codepen.io/GeoffStorbeck/full/RPbGxZ/ ...

javascripthtml

CSS-Enabled Panels held in place with Draggable Feature

Currently immersed in my first ASP.net/HTML/CSS Application, I am exploring the realm of draggable panels using the Ajax-Control-Toolkit. So far, it's been a successful endeavor as I have managed to implement a single panel into my application! As de ...

htmlcssasp.netajaxcontroltoolkit

Having trouble with the alignment of the product grid on Woocommerce with the Wootique theme?

Hey there, I've been facing an issue with the woocommerce product display grid layout. The items keep getting misaligned, with one on a line and the others right next to each other. I attempted to fix it by adding some custom CSS code: .woocommerce ...

htmlcssajaxwordpresswoocommerce

Utilizing JavaScript to retrieve input names from arrays

This is the HTML form that I am currently working with: <form action="#" method="post"> <table> <tr> <td><label>Product:<label> <input type="text" /></td> <td><label>Price:<label> ...

javascriptjqueryhtmlformsdom

Combine the text of the button onto a single line

It seems like my button text appears fine on Safari, but in Google Chrome the issue arises. When you first arrive at the button, everything looks okay. However, after navigating through more posts and encountering the load more button again, the text gets ...

csswordpressbuttonalignmentwidth

Looking to adjust the background-image size of a table cell (td) upon clicking a specific

I have a website where I would like to display logos of different games with links attached to them. I have managed to adjust the size of the image on hover, but now I am looking for a way to keep the size bigger after clicking on the link. Is there a simp ...

javascripthtmlbackgroundcss

Adaptive text sizing within Microsoft Outlook

I am facing a challenge in making the font size of my email signature responsive. Although VW seems to be the solution, it doesn't seem to work in Outlook. I have attempted using CSS, but it appears that inline CSS might be necessary. However, I am un ...

htmlcssoutlookinline

If padding is included, the width of an element will be affected when using rem

I am facing an issue in my project. Whenever I try to insert a custom font-size at the html level, the red badges get deformed when there is padding (p-6) on the first line of code. Can someone assist me with this problem? I am using Tailwind CSS, but even ...

htmlcsstailwind-css