I am looking to align my grid item at the center within an HTML and CSS template

The current scenario is as follows: view image description here

I am looking to center this particular product. Here is the code snippet:

<div class="row isotope-grid">
                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women">
                    <!-- Block2 -->
                    <div class="block2">
                        <div class="block2-pic hov-img0">
                            <img src="images/product-01.jpg" alt="IMG-PRODUCT">

                            <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                                Quick View
                            </a>
                        </div>

                        <div class="block2-txt flex-w flex-t p-t-14">
                            <div class="block2-txt-child1 flex-col-l ">
                                <a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                    Esprit Ruffle Shirt
                                </a>

                                <span class="stext-105 cl3">
                                    $16.64
                                </span>
                            </div>

                            <div class="block2-txt-child2 flex-r p-t-3">
                                <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                    <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                    <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
</div>

Seeking assistance as I am a novice and just starting out with this.

htmlcss

Answer №1

To perfectly center elements, you can utilize the following CSS:

display: block;
margin-left: auto;
margin-right: auto

This CSS snippet will allow you to center both vertically and horizontally:

    div.container4 {
    height: 10em;
    position: relative }
div.container4 p {
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) }

If you want to center text specifically, use this CSS code:

text-align: center;

In the provided example below, the following code demonstrates how to control the vertical positioning of an element:

.block2{
position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
<div class="row isotope-grid">
                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women">
                    <!-- Block2 -->
                    <div class="block2">
                        <div class="block2-pic hov-img0">
                            <img src="images/product-01.jpg" alt="IMG-PRODUCT">

                            <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                                Quick View
                            </a>
                        </div>

                        <div class="block2-txt flex-w flex-t p-t-14">
                            <div class="block2-txt-child1 flex-col-l ">
                                <a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                    Esprit Ruffle Shirt
                                </a>

                                <span class="stext-105 cl3">
                                    $16.64
                                </span>
                            </div>

                            <div class="block2-txt-child2 flex-r p-t-3">
                                <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                    <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                    <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
</div>

You have the flexibility to adjust the vertical alignment by changing the 'top' percentage value as desired (e.g., top: 20%;).

Answer №2

#container{
display:flex;
justify-content:center;
align-items:center;
height:100vh;}

img{
max-width:500px;}
<div id='container'>
<div class="row isotope-grid">
                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women">
                    <!-- Block2 -->
                    <div class="block2">
                        <div class="block2-pic hov-img0">
                            <img src="https://via.placeholder.com/100" alt="IMG-PRODUCT">

                            <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                                Quick View
                            </a>
                        </div>

                        <div class="block2-txt flex-w flex-t p-t-14">
                            <div class="block2-txt-child1 flex-col-l ">
                                <a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                    Esprit Ruffle Shirt
                                </a>

                                <span class="stext-105 cl3">
                                    $16.64
                                </span>
                            </div>

                            <div class="block2-txt-child2 flex-r p-t-3">
                                <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                    <img class="icon-heart1 dis-block trans-04" src="https://via.placeholder.com/25" alt="ICON">
                                    <img class="icon-heart2 dis-block trans-04 ab-t-l" src="https://via.placeholder.com/25" alt="ICON">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
</div></div>

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

Retrieve four distinct values using only a single text box input and display them individually on separate lines

Is there a way to receive four input values from the user using just one textbox and display them on separate lines? function collectData() { var userInput, i; var textOutput = " "; for (i = 0; i <= 3; i++) { userInput = document.g ...

javascripthtmldeveloper-tools

login form for wordpress

After diving into wordpress, I find myself a bit puzzled by its functionality. Could someone provide me with an illustration of how to exclusively enable user login/registration? (In particular, I want to avoid navigating to the control panel) In other ...

htmlwordpress

The scss function is returning an invalid property value

In my Angular project, I have organized my scss files/folders in the following way: 1) Settings - containing color settings and functions for the project 2) Files and folders defining variables such as fonts, widths, etc. for components and pages 3) Fil ...

cssangularsass

What is the best way to position a title and subheading alongside an image?

I am currently working on developing a blog using php and html to enhance my coding skills. On my website, I have a special category where I display posts, the number of which can vary. Each post is composed of a title, a subheading, and a placeholder div ...

htmlcsstext-align

Is misbehavior expected at approximately 600 pixels in width?

What is happening with my website when the width is minimized, and how can I resolve it? Issue The website appears fine on mobile devices and full screens, but at reduced sizes, the background image disappears and the top bar behaves strangely (with the l ...

htmlcssmedia-queries

Implementing an icon in a jQuery accordion

Currently, I am utilizing docs.jquery.com/UI/Accordion for my project and it is functioning smoothly. However, I am encountering some difficulty in trying to incorporate an icon into the headers of the accordion component. All I require is to include the ...

jqueryhtmlcss

Checkbox enabled Bootstrap image

I am encountering a minor issue where I am attempting to incorporate a simple image that can be toggled on and off by clicking on it. After coming across some bootstrap code online, I decided to test it in my project. Unfortunately, the code does not seem ...

javascripthtmlcss

The CSS Inline-Grid counterpart in Bootstrap 4

I am looking to showcase a list of items on a desktop web page in a dynamic grid format. <div class="departments"> @foreach (var department in Model) { <div> <img src="department_photo.png" /> <div class="details"> ...

cssbootstrap-4twitter-bootstrap-4

Exploring ways to create additional file upload fields with distinct names through JavaScript

My latest project involved creating a button that allows users to add a file upload field, a separate button to remove a file upload field, and a counter to keep track of the total number of file upload fields. However, it appears that the fields are not b ...

javascripthtmldomform-fields

Including hyperlink tags within a CSS file

Can you create internal links within a CSS file, like inserting a table of contents at the top where you can click on an item and immediately jump to that section in the CSS file similar to an anchor tag? This feature would be extremely handy for long CSS ...

htmlcss

Exploring the past: the significance of History.js and

I'm looking for a clear explanation of states - anyone care to help? For example, let's talk about the history.js plugin. History.pushState({state:1}, "State 1", "?state=1"); // This code logs {state:1}, "State 1", "?state=1" I have a basic un ...

jqueryajaxhtmlbrowser-historyhistory.js

Sending Data to a Component in AngularJS

I need help passing a value from one component to another. Location List <div uib-accordion-group class="panel-default" heading="{{location.name}}" ng-repeat="location in $ctrl.locations"> <p>This is from location list: {{location.id}}</ ...

htmlangularjsdata-bindingangular-components

What could be the possible reason for the controls in my element getting disabled due to adding a JavaScript background

First and foremost, I want to share a link with you to a page that I am currently developing so you can better understand the situation: Additionally, here is a link to the background effect: https://github.com/jnicol/particleground If you visit the page ...

javascripthtmlcsswordpress

Ways to verify login status on index.html

By using the code below in "index.php", I can determine the user's session status: <?php if(isset($_SESSION['id'])) { ?> <li><a href="controller.php?type=logout" class="btn btn-borders btn-primary">Log out</a>< ...

javascriptphphtml

Avoid Conversion of HTML Entities in Table Cells

<table> <tr> <td>&gt;</td> </tr> <tr> <td>&&#xfeff;GT</td> </tr> </table> In the code snippet above, I have table cells containing HTML entities. A re ...

javascripthtmlangularjs

Stopped due to an error: TypeError - document.getElementById(...) is not defined

Currently, I am working on developing a commenting system. Everything seems to be functioning well as long as there is at least one existing comment. However, if there are no comments present and an attempt is made to create one, an error message pops up d ...

javascripthtmldjangoajaxdjango-templates

Splitting an array into multiple arrays with distinct names: A step-by-step guide

I have a data set that looks like this: [A,1,0,1,0,1,B,1,0,0,1,A,1]. I want to divide this array into smaller arrays. Each division will occur at the positions where "A" or "B" is found in the original array. The new arrays should be named with the prefix ...

javascripthtmlarrays

R code for extracting data without using CSS path

Hey there, I'm reaching out because I'm struggling to figure out how to extract data from a webpage (""). Learning how to scrape data is my current project, and I'm specifically trying to gather contact information (Office, Fax, email) from ...

cssrwebweb-scraping

Prevent highlighting of empty spaces in HTML by disabling selection

My goal is to be able to identify the word that is clicked on screen using jQuery without selecting any white space. For example, if I click between the word "together" and the down arrow, it should not select anything in this scenario. To achieve this, I ...

htmlselect

When attempting to open the HTML file through an Express application, the background image specified by `background-image: url()` may

Upon opening the html file by directly clicking on it, the background-image styled with url() functions correctly. However, when I open this file within an express app using res.sendFile(), the background-image fails to display. Interestingly, all other CS ...

htmlcssexpress