Hello there, I require assistance with aligning some images in the center of my Prestashop webpage.
I am specifically struggling with aligning 3 circular images at the bottom of the page (not social icons). I cannot figure out how to properly center these images within the circles.
Any guidance or help on this matter would be greatly appreciated. Thank you!
To position the images inside their container, you can use absolute positioning and follow these steps:
.certifikat class so that any absolutely positioned children will be contained within it.<img> tags inside the .certifikat class.In summary, for the .certifikat class, add the following CSS properties:
.certifikat{
position: relative;
overflow: hidden;
/*Add the rest of your CSS code here*/
}
If you know the width and height of the images, you can center them using the following CSS:
.certifikat img{
position: absolute;
top: 50%;
left: 50%;
margin-left: -(half of image width);
margin-top: -(half of image height);
}
OR if you're unsure of the exact dimensions, you can use the translate method as shown below:
.certifikat img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
I hope this helps guide you in the right direction.
$(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 200) { $(".nav-bg").css({ "background": "#fff", ...
I am currently working on creating a div that includes a small circle on the right side with an X inside it. Here is my progress so far: https://i.sstatic.net/3r2Nl.png Although the X is not yet placed inside the circle as intended, overall it looks good ...
Encountered an interesting bug where users are unable to scroll down a text nested inside a div. This issue seems to be isolated to Safari, as it doesn't occur in other browsers. I have prepared a sample file to demonstrate the bug and would apprecia ...
This is the code I am currently working with: <v-container height="0"> <v-row align="center" justify="center"> <v-hover v-slot:default="{ hover }" v-for="(option, index) in options" ...
Having some trouble getting my if / else statement to function correctly. I am using a WordPress function called '' and I want to apply different CSS styles based on whether it is used or not. My theme allows for the display of a banner, but onl ...
I am tasked with creating an HTML element that automatically detects when text has wrapped three times, truncates the content, and adds a "more..." link at the end of the third line. Can this be achieved? If yes, what is the process to implement it? ...
Currently, I am working with Polymer version 1.2.1 and have included core-icons in my elements.html file using the following import statement: <link rel="import" href="/bower_components/core-icons/social-icons.html"> Within a custom Polymer element ...
I am trying to create a nested unordered list with specific numbering. My goal is for the list to start at "1.2.1, 1.2.2, etc." Please refer to the attached fiddle for reference. The desired outcome is shown in the following image: https://i.stack.imgur ...
I have implemented django_compressor in my project. This is how I set it up in my template : {% load compress %} {% compress css %} <link rel="stylesheet" href="/media/css/master.css" type="text/css" charset="utf-8"> {% endcompress %} In my setti ...
Currently working on a PHP-based website that is utilizing the Zend framework and hosted on an Apache server. The folder structure within my www directory looks like this: +www | |_+css | | | |_images | |_js | |_images The issue I'm ...
I've been attempting to add a small graphic using CSS to indicate the current page the viewer is on, but for some reason, it's not highlighting properly. Below is my code: HTML: <ul class="side-nav"> <a href="http://www.cieloazulsant ...
After the image completes its animation by sliding in from the left, I would like it to vibrate for 2 seconds using the HTML 5 vibrate API: navigator.vibrate(2000); An on-click event successfully triggers the vibration when a button is clicked: <butt ...
I'm trying to create a div that smoothly transitions from a set height to a height based on its text content. This likely involves considering the window width, as narrower windows cause text wrapping and increase the required height. #object { w ...
I have 3 circular divs that resize slightly when you hover over them, but this resizing also occurs if you hover near them. Additionally, I want them to be centered with some responsive spacing. Here is a live demo: demo Below is my code: <div id ...
I am a newcomer to vue.js and I have a question about creating a bounding box for any element. This bounding box resembles a view box in svg. For example, I have created a checkbox like this one: checkbox Below is the code to style the checkbox: /* checkb ...
A demonstration form control extracted from the Bulma CSS framework documentation performs as anticipated with Bulma 0.7.2 (most up-to-date version at the time of writing). However, when this form is contained within a standard html <details> tag, t ...
After creating 3 inline divs, each taking up 33.333% of their parent width, I encountered an issue while trying to insert images into them. Whenever the image exceeds the 33.333% width of the div, it overflows outside the container. My goal is to make the ...
I'm having trouble adjusting the spacing between the bottom of a semi circle donut chart in Highcharts and the legend below it. Despite my efforts, I have not been successful in reducing this gap. Here is the basic chart I am currently working on: h ...
Having a bit of trouble with vertically centering a child div within its parent. I've been using this mixin: @mixin vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); ...
Can anyone help me with inserting the following CSS into HTML? Here is the CSS snippet that needs to be converted to HTML: .group .circular-progress::before { ... content: "10%"; ... } This is what I have attempted so far: <div class="group"&g ...