Is there a way to align an image to the center using the display grid property?

Having some trouble centering an image within a 'display: grid' layout.

Screenshot

I attempted to use 'align-items' but it didn't seem to work either.

Code:

<section style="padding-top: 30px;">
        <h4 style="text-transform:uppercase;  display: inline-block; font-weight: bold;">Possible Agreements:</h4>

        <div style="display: grid; grid-template-columns: 120px repeat(1, 1fr); grid-gap:30px; padding-top: 30px;">
            
            <div style="background-color: lightgray; width: 100%; height: 100%;">
                <img src="icons/money_icon.png" style="margin-left: auto; margin-right: auto; display: block; width: 50px;">
            </div>
            <div>
                <p style="font-weight:bold;">1. Mandatory:</p>
                <p>text</p>
                <p style="font-weight:bold;">2. Discretionary:</p>
                <p>text</p>
            </div>
        </div>
    </section>
htmlcss

Answer №1

To make the image in the div centered, you can add a .center class to the div and set display: grid; along with align-items: center;. Here's an example:

.center {
  display: grid;
  align-items: center;
}
<section style="padding-top: 30px;">
        <h4 style="text-transform:uppercase;  display: inline-block; font-weight: bold;">Os Convênios podem ser:</h4>

        <div style="display: grid; grid-template-columns: 120px repeat(1, 1fr); grid-gap:30px; padding-top: 30px;">
            
            <div class="center" style="background-color: lightgray; width: 100%; height: 100%;">
                <img src="icons/money_icon.png" style="margin-left: auto; margin-right: auto; display: block; width: 50px;">
            </div>
            <div>
                <p style="font-weight:bold;">1. Impositivos:</p>
                <p>text</p>
                <p style="font-weight:bold;">2. Autorizativos:</p>
                <p>text</p>
            </div>
        </div>
    </section>

Answer №2

To vertically center your image, consider incorporating flexbox into the container where your image is located. By applying align-items: center to the wrapping div, you can successfully achieve this effect. Simply include the following CSS style within the div:

display:flex; align-items:center;

Insert this code snippet into the existing div:

<div style="background-color: lightgray; width: 100%; height: 100%;">

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

Detect click outside in JavaScript for closing

While this topic has been discussed before, each issue presents its own unique challenges. Despite trying various solutions and examples for making the submenu close when clicking outside of it, I have not had any success. Is there a way to make the uslug ...

javascriptjqueryhtml

Expand the object by clicking on it, causing the surrounding objects to move outside the viewport instead of appearing below

I'm facing a challenge with 3 squares inside one container, each occupying 33.33% of the viewport and placed next to each other. When I click on one square, it should expand to full viewport width and reveal hidden content, while the other two remain ...

jquerycssviewportexpand

Discovering indistinguishable "Feeling Fortunate" inquiries

My goal is to create a program on my website that can compare the top search results for different queries. For instance, I want it to recognize that the top search result for "twelve" and "12" is the same, leading to https://en.wikipedia.org/wiki/12_(numb ...

javascriptphphtmlnode.js

How can we improve our vertical division method?

Looking for a more efficient way to create a vertical divider between two divs. I want the divider to be centered between the "why choose" and "gallery" sections. Here is an example of what I'm trying to achieve. I've attempted the following co ...

htmlcss

Tips for avoiding word wrapping in text with white spaces

I am currently experiencing an issue with word-wrapping in my category names when there are two words separated by a space. Below is the CSS code snippet: .post-item .cat { height: 25px; display: inline-block; background: #CC0000; font-size: 11px; paddin ...

css

Transfer data between an HTML page and a PHP page hosted on separate locations using jQuery

Below is the code snippet I am currently working on: function send_data() { var a=$("#username").val(); var b=$("#password").val(); $.post("http://localhost/login/login.php", {uname: a, pswd: b}, function(data) { $("#result").html(data); }); ...

javascriptphpjqueryhtmlajax

Unable to prevent ordered lists from overlapping with other content I attempt to place beneath them in HTML

function filterImages() { let input = document.getElementById('searchbar').value; input = input.toLowerCase(); let images = document.getElementsByClassName('gallery'); for (let i = 0; i < images.length; i++) { ...

javascripthtmlcsshtml-lists

What are some ways to utilize JavaScript for expanding an HTML form?

I am in the process of developing a basic web application that allows users to create messages with attached files. multiple html file inputs using this javascript link: http://img38.imageshack.us/img38/4474/attachments.gif The functionality to "attach a ...

javascripthtml

Why is the value returned by getBoundingClientRect 190 when the y attribute is set to 200 in SVG?

When placing textBox1 at a y-position of 200, getBoundingClientRect is returning a value of 190. What could be causing this discrepancy? For more details and code snippets, please refer to the following link: https://codepen.io/anon/pen/REKayR?editors=101 ...

javascripthtmlsvg

Enhance the Bootstrap parallelogram navbar menu by ensuring the menu items are perfectly aligned

I am working on customizing Bootstrap 5's navbar menu to create a rollover menu with parallelogram-shaped active menu items. I followed the approach recommended here, and while it works, the output is not as polished as I would like because the parall ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for responding to and disabling a specific button in Vuetify.js after clicking the follow or unfollow button

I have a situation where I need to implement a functionality for a series of buttons with follow and unfollow statuses. When a user clicks on any button, I want the status to change after a brief delay and deactivation, followed by reactivation. For instan ...

javascripthtmlvue.jsnuxt.jsvuetify.js

Retrieve data from an HTML table with the power of jQuery

I have a table with the following structure. <form id="myform"> <table> <tr><th>TEST</th> <th>VALUES</th> <th>UNIT</th> <tr><td>Abc</td><td><input type="text" & ...

jqueryhtml

Obtain data from a local JSON file using the http.get() method in Angular 2

I am attempting to utilize the http.get() method in Angular 2 to load a local JSON file. I followed a suggestion from Stack Overflow that involves modifying my app.module.ts: In this example, I have imported the HttpModule and the JsonModule from @angular ...

javascripthtmljsonangularhttp

Having trouble with Flowbite dropdown functionality in Next.js 12.* with Tailwind CSS

Hello, I am a newcomer to Next.js and currently working on a project using Tailwind/Flowbite. I copied and pasted the Flowbite search input with dropdown code from , but unfortunately, the dropdown is not functioning as expected. I have followed the docum ...

cssnext.jsdrop-down-menutailwind-cssflowbite

Determine the width of invisible images using JavaScript/jQuery

Please take a look at the jsFiddle Every time I run it, I am trying to retrieve the width of the images, but the values I get are as follows (check in the JS console) 400 0 575 533 0 ... Some values are zero, and I can't figure out why. It seem ...

javascriptjqueryhtmlcssjquery-plugins

How can I delay the loading of a link until the pop-up is closed?

I have successfully implemented a pop-up on my website, but I am facing an issue where I need to prevent any linked pages from loading until the visitor clicks on the accept button. However, I am struggling to make it function as intended. Below is the sn ...

javascripthtmlcss

CSS - selecting elements that are greater than a specific criteria N

I have multiple <p> tags in the body of my HTML. I want to display only the first two paragraphs and hide all the paragraphs that come after. However, the code I'm using doesn't seem to work as expected. <html> <head> < ...

htmlcsscss-selectors

Achieving a Photo Grid Layout with CSS

Looking for help with my CSS photogrid - it's close to what I want, but not quite there. Here's the layout I'm aiming for: 1 | 2 | 3 4 | 5 | 6 But currently, it displays like this: 1 | 3 | 5 2 | 4 | 6 I've tried tweaking the CSS but ...

htmlcss

Is that possible to prevent the use of the & symbol in Angular 4 HTTP requests?

Using an HTTP request to save data in my database. The code snippet I used is: const form = '&inputdata=' + myinput + '&rf_date=' + rf_date; return this.http.post(this.rootUrl, form, {headers : this.reqHeader}); In thi ...

htmlangulartypescript

Converting a 'div' element into a dropdown menu with CSS and Jquery

I am facing a challenge where I have a collection of buttons enclosed in a div that I want to resemble a dropdown: <div id = "group"> <label> Group: </ label> <div value =" 1hour "> 1h < / div> <div value =" 2hou ...

javascriptjquerycss