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>
On a single web page, there are 3 different language words displayed: Language / 한국어 / ภาษาไทย I am interested in enlarging the Thai word (ภาษาไทย) to make it stand out. <span class="thai">ภาษาไท ...
Is there a way to change the clicked color of a Chip component without modifying the theme.js file? I attempted to override the classes with the desired colors, but it still defaults to primary/secondary colors. This information was found in the source co ...
I have an AJAX call to a controller that returns array data to my view. I want to display this array data in HTML upon clicking, but I'm not sure how to do it yet. Here's what I have so far: AJAX Call: request = $.ajax({ url: "/fans/ ...
I have integrated Firebase into my React Native app, and I have only enabled anonymous login feature. Currently, I am attempting to invoke a Cloud Function from the app without utilizing the firebase SDK. Instead, I intend to make the call using axios. De ...
I am currently working on a countdown timer using Typescript that includes setting an alarm. I have managed to receive input from the time attribute, converted it using .getTime(), subtracted the current .getTime(), and displayed the result in the consol ...
Having some trouble implementing a load more button that adds 10 more items to the page when clicked. The button code seems to be causing issues as all items still appear on the page and there are no errors in the console either. As a result, the button is ...
Having trouble with the Android Webkit browser and need to manually detect when the soft-keyboard is hidden by pressing the button in the top right corner. https://i.stack.imgur.com/x11Vp.jpg In the image above, pressing the button hides the soft keyboar ...
When it comes to passing a string parameter to my component, I need the flexibility to adjust the parameters of services based on the passed value. Here's how I handle it: In my index.html, I simply call my component and pass the required parameter. ...
I have an array of objects where I need to add a key value State : const [row, setRow] = useState([{ nameofthework: "", schedulerefNo: "", unitprice: "", qty: "", uom: "", gst: "", total: "& ...
This tutorial is inspired by the MEAN Stack demo: Mongo, Express, AngularJS, and NodeJS I am attempting to incorporate a 'delete' method into my controller in the Jade template as shown below: characters.jade script function CharactersCont ...
I'm really struggling to understand how isolating scopes function in my code. Interestingly, everything seems to work fine when I remove the scope part of the directive. Can someone please shed some light on what I might be overlooking? export func ...
I'm currently in the process of developing a component library using rollup and Vue with the goal of making it tree shakable for others who import it. The configuration setup is outlined below: Here's a snippet from package.json { "name": "re ...
I need to calculate the product of a PHP variable value and a JavaScript variable, then show the result on the screen. Here is my PHP code: <?php require 'config.php'; session_start(); ?> <html> <head> < ...
Presently, the grouped columns are concealed using the attributes of the k-group-indicator element field. $("div.k-group-indicator").each(function (i, v) { grid.hideColumn($(v).data("field")); }); However, I am now faced with the task of making th ...
What is the best way to incorporate the dictionary a into the response, and how can I retrieve two objects through an ajax call? view def abc(request): cp = Cp.objects.get(id=1) cp = serializers.serialize('json', [cp,]) cp = json.lo ...
website.html <website-chat></website-chat> chat-page.html <h1>Greetings</h1> chat-script.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'website-chat', templateUrl: '. ...
I am attempting to check if the next has a token or not, but it is not working and I am getting an error: TypeError: Cannot read property 'next' of undefined Any suggestions? app.js .run(function ($rootScope, $location,$log,User) { ...
UPDATE :- After troubleshooting, I discovered that the previous error stemmed from my command handler itself! However, now I am encountering a whole bunch of new errors... actually, multiple errors. So, I'm in desperate need of assistance. (Note: Apol ...
Although I achieved my desired output, the method in which it was done is not ideal because AJAX duplicates with every click. Check out my code: <a href="/messages/schedule" class="greenbtn fancybox">Schedule</a> $('a.fancybox').cl ...
Exploring the use of jQuery filter for data attributes with tables that contain team, specialization, and level data variables. Seeking advice on the best approach and typical usage methods. Here is my HTML code: <table data-team="<?php print $name[ ...