Looking to center an image that is positioned absolutely horizontally within a container that is relatively positioned. After attempting with CSS and not finding success, I ended up using Jquery.
http://jsfiddle.net/CY6TP/ [This is my attempt using Jquery]
**Any help on achieving this using CSS would be appreciated.**
Thank you in advance
Here is a solution you can try out:
var width=$('.main').width();
var height=$('.main').height();
$('a').css(
{
"position":"absolute",
"bottom":"50%",
"margin-top":(height/2),
"left":(width/2)-50
});
UPDATE
In CSS
.main a{
bottom:50%;
margin-top:-150px;
position:absolute;
left:75px;
}
To style everything in CSS, you can use the following code:
a{
position: absolute;
height: 10px;
width: 100px;
top: 50%;
margin-top: -5px;
left: 50%;
margin-left: -50px;}
Give this a shot to center it horizontally
.element{
position: absolute;
text-align: center;
width: 100%;
}
OR use this method to center it both horizontally and vertically
.element {
height: 100%;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
}
body img { top:55%; left:45%; margin: -10px 0 0 -48px; position: absolute;}
Does this fit your requirements?
If you are looking to create a fixed height for your image, consider implementing the following solution:
Styling with CSS:
#image-container {
width:100%;
height:100px;
text-align:center;
}
#image-container img {
line-height:100px;
}
HTML Structure:
<div id="image-container">
<img src="yourimage.jpg" />
</div>
let array1 = [2,4,6] let array2 = [3,3,3] let result = dotProduct(array1,array2) // should return 36 Can you suggest a streamlined approach to creating the dotProduct function without relying on external libraries? ...
I could really use some assistance =) Currently, I'm utilizing Material UI V1 beta to populate data into a DropDown menu. The WS (Web Service) I have implemented seems to be functioning correctly as I can see the first option from my Web Service in t ...
$(document).ready(function(){ jQuery("#but1").bind("click",function(e){ alert(e.name); }); jQuery("#but1").trigger({name:'Dmy', surname:'My'}); }); The information doesn't seem to be getting passed correctly a ...
I encountered a TypeError: pos is undefined while running the code below. $(document).ready(function() { var s = $("#col-scroll"); var pos = s.position(); $(window).scroll(function() { var windowpos = $(window).scrol ...
I am currently attempting to implement an onClick event on the data that I have selected from the AsyncTypeahead. My goal is to pass a callback function to the Problem component, which will only render if an item has been selected. However, after selecting ...
Is there a way to redirect incoming requests to different endpoints depending on a query parameter in the request? For instance, http://localhost:9000/?category=xyz¶m1=...¶m2=... The category value can be any of [abc, ijk, pqr, xyz]. Gi ...
I have come across multiple discussions about the issue of Ajax.BeginForm posting twice in a partial view. While most responses attribute this problem to unobtrusive.js being included twice, I have double-checked and confirmed that it is only included once ...
When attempting to create an infinite animation for the rocket similar to the one shown here, I encountered an issue where the rocket does not hide beneath the parent div as demonstrated in the example. Instead, the rocket changes position on the Y-axis an ...
I am trying to create a vertical line inside a DIV container. After that, I want to add an image on top of the vertical line (see attached picture for reference). This is what my current source code looks like: <div style="background-color:gray;width ...
My goal is to send the browser's geoposition using jQuery Ajax. if (window.navigator.geolocation) { var failure, success; success = function(position) { var stringData = JSON.stringify(position, null); $.ajax({ typ ...
Currently, I am working on an audio player where I need to implement functionality to pause and resume the playback. I have already set up the pause() and resume() functions in my script. The issue I am facing is related to the HTML button that triggers th ...
I'm interested in creating an app similar to Canva, but I'm not sure where to begin. I have a solid understanding of HTML and CSS, but my JavaScript skills are basic. I'm curious about the technologies they use. Is there a way to save HTM ...
When using JQuery Mobile 1.3.1 to load an external view into the DOM using $.mobile.changePage, I ensure that the correct options are used to load the view as a dialog. However, I am facing an issue where the rounded corners on the dialog seem to disappear ...
I am working with a grid layout that I want to span exactly the height of the screen - no more, no less. The grid includes a fixed header (one), a fixed footer (three), and scrollable content (two). .grid-container { display: grid; grid-template-a ...
Currently, I am working on implementing validation using passport.js and ES6. Below is the validation function that I have created: passport.use(new BasicStrategy( function(login, password, callback) { User.findOne({ login: login }).select(&a ...
I am currently working on creating a PHP comment page that displays unique comments for each specific URL ID. However, I have encountered an issue where the comment page is shared among all URLs. I understand that I need to add the URL ID (bug ID) to the M ...
Consider the following table structure: ID | ident | product 1 | cucu1 | 99867 | 2 | kkju7 | 88987 | 3 | sjdu4 | 66754 | 4 | kjhu6 | 76654 | 5 | cucu1 | 98876 | Running the query: SELECT ident,COUNT(*) FROM sales WHERE status=? AND team=? AND DATE(da ...
Is it possible to use ng-model to identify the type of an element? For example: How can we determine if a specific element is a dropdown or a checkbox? HTML Code Snippet <select multiple ng-model='p.color'> <option value="red">Re ...
I have successfully implemented a cookie in my express/node.js application. var express = require('express'); var cookieParser = require('cookie-parser') var app = express(); app.use(cookieParser()) app.use(function (req, res, next) ...
Could you please take a look at the code snippet below? I am dealing with a situation where I have a container with a fixed width, and inside that container, there are rows whose width exceeds that of the parent container. Some of these rows have a backgro ...