We Keep Coding

How do you horizontally center an element with "position: absolute"?

Okay..... So here is a list of things to know:
First, I am using fabric.js (I didn't include it in the tags because it's not the central focus of the problem), which means that when I create a new instance of a fabric.js canvas, it creates 2 canvas elements (.lower-canvas) and (.upper-canvas), which by interacting with it, I've come to find out that they are absolutely positioned, so long story short (with a huge run on) I can't change the fact there are 2 canvases and I can't change to a different library.
Second, I am using bootstrap to keep the UI looking slick. Right now it's structure looks like
<div class="row">
<div class="col" id="canvas_container">
<canvas id="canvas">
</canvas>
</div>
</div>
<div class="row">
<div class="col">
<br>
</div>
</div>
<div class="row">
<div class="col">
---some buttons---
</div>
</div>
So when the page is generated, it changes from the previous code block to
<div class="row">
<div class="col" id="canvas_container">
<div class="canvas-container">
<canvas id="canvas" class="lower-canvas">
</canvas>
<canvas class="upper-canvas">
</canvas>
</div>
</div>
</div>
<div class="row">
<div class="col">
<br>
</div>
</div>
<div class="row">
<div class="col">
---some buttons---
</div>
</div>
which changes the previous canvas to 2 different canvases with different classes but keeps the id of the initial canvas on one of the canvases, and creates a div with class "canvas-container" to encapsulate both canvases.
Third, the canvases will have dynamic sizes. The user will select which size canvas they want to use to interact with the fabric canvas.
Fourth, I have looked at various links on stackoverflow to try, and some have come really close, but still no cigar. The one I am thinking of specifically is here if you'd like to check it out.
Fifth, there shouldn't be any additional css affecting any of the elements apart from bootstrap - with the exception of the canvas elements to affect their size (measured currently in % but may change to vw or vh).
---The Problem Statement---
Just to restate the problem, I am trying to center both canvases that have absolute positions. I think this might be best accomplished if I can center just the .canvas-container, since both canvases are encapsulated in it and since they have absolute positioning. Any thoughts on this?
Let me know if there is anything else I can do to clear up anything I may not have touched on.
Thank you in advance.
--edit--
Just to give a little more context, the light blue boxes will always be the canvas element that needs to be centered.
Here is an update regarding one of the proposed solutions from #SoluableNonagon (it is the post that has a parent and 3 children that are vertically, horizontally, and "both" aligned), so you can see what is going on... for reference, the gray bar at the bottom is horizontally aligned.
The green box is the #canvas_container element which shares the class col.
The light blue box is made up of both canvases.
Moving the css "up" on level to where the child becomes the parent and the new parent's contents becomes the child results in this
#Gagandeep Sangh 's solution without making proper changes to affect the one specific element.
After making the changes to affect the 1 element, the result is like so

Generally, when an element is position: absolute the parent is position: relative.
Then, the absolute element is left: 50%; transform: translateX(-50%); for horizontal centering. For vertical centering top: 50%; transform: translateY(-50%);
.parent {
position: relative;
height: 200px; // needs height/width cause 'absolute' child takes no space
width: 200px;
border: 1px solid red;
}
.child-1 {
position: absolute;
height: 50px;
width: 50px;
border: 1px solid blue;
left: 50%;
transform: translateX(-50%);
}
.child-2 {
position: absolute;
height: 50px;
width: 50px;
border: 1px solid orange;
top: 50%;
transform: translateY(-50%);
}
.child-3 {
position: absolute;
height: 50px;
width: 50px;
border: 1px solid green;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class='parent'>
<div class='child-1'>horizontal</div>
<div class='child-2'>vertical</div>
<div class='child-3'>both</div>
<div>

The <div class="canvas-container"> can be centered respective to its parent <div class="col"> using position:absolute; and setting the col div to position:relative; but here comes a new issue that after setting the <div class="canvas-container"> as absolute it will flow out of its parent div and the height of parent div will collapse as it doesn't have any other content in it, than you need to add some height to that div also, so basically you can try this
.col{
min-height:500px;
position:relative;
}
.canvas-container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
Hope it works.

click target area overlapping over targets

I have 4 simple img and h4 which are targeted to 3rd party links. The class projectImage2 overlaps the other 3 and much of the page is targeted to the click
<a href="https://eliottenos.github.io/eliott-game/"<div class="game"<h4>Game Application</h4></div></a>
<a href="https://github.com/eliottenos/filebucket-client"><img class="projectImage2"src="http://i.imgur.com/iiGiuX7.png"
title="FileBucket Application" /></a>
<a href="https://eliottenos.github.io/filebucket-client/"><div
class="fileBucket"><h4>FileBucket Application</h4></div></a>
<a href="https://github.com/eliottenos/eliott-game"><img
class="projectImage1"src="http://i.imgur.com/iiGiuX7.png" title="Game
Application" /></a>
The only thing I can that think that could be throwing it off is the CSS?
.game {
position: absolute;
padding-left: 250px;
padding-right: 250px;
padding-top: 130px;
}
.fileBucket {
position: absolute;
padding-left: 250px;
padding-right: 250px;
padding-top: 200px;
}
.projectImage2 {
height: auto;
width: auto;
top: 450px;
left: 440px;
max-width: 100px;
max-height: 70px;
position: absolute;
display: inline;
}
.projectImage1 {
height: auto;
width: auto;
top: 380px;
left: 440px;
max-width: 100px;
max-height: 70px;
position: absolute;
display: inline;
}

So i had a proper look, the problem is not only the links but how your html is structured, there's position:absolute on pretty much everything, so everything is overlapping everything, i would strongly suggest you to use bootstrap template as a start, you can easily set columns and rows with bootstrap and it will be responsive. i tried to put the links in the correct position, but because you have position:absolute on everything, i would have to change how the html is laid out, for example some of the things which is below another part in html pops up on top of that content.
You have to think your html as horizontal rows, doesn't matter if they are left or right, if they appear on the same line, put it under one div.
For example, for your content with bootstrap, you could do something like this:
<div class="row">
<div class="col-md-4">
Contact Details, Phone Number etc...
</div>
<div class="col-md-8">
<p>
Fullstack Web Developer coming from a diverse, technical business background. Having worked and traveled the world, I have acquired a breadth of skill sets through different industries which has culminated in my goal of becoming a trained fullstack web developer.
</p>
<ul class="main">
<li>Write HTML, CSS, and JavaScript for displays in contemporary browsers with responsive design practices</li>
<li>Develop back-end web applications and APIs using a modern programming languages and MVC web development framework</li>
<li>Collaborate with teams using an agile development workflow and widely-accepted collaboration practices using Git and GitHub for version control</li>
<li>Improve and demonstrate web development skill-set by building a series of full-stack web applications</li>
</ul>
</div>
</div>
Where the left side takes up 4 columns and right side takes 8 columns and the total column width always adds up to 12. So you can do something like this as well.
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>

How to make an image hyperlink in <h2> tag where <h2> consist of text and image?

There is an <h2> tag which consist of text as well as image. I want to make the image as a hyper link without including the text.
<h2>Sample text<img src="test.png"></h2>
I tried to put anchor tag using <div>, <span> etc. but it break the <h2> into 2 lines.
<h2><nav>Sample text</nav><nav><img src="test.png"></nav></h2>
I could only make the entire <h2> as hyper link and not the image inside.
Is there any way to make an image inside <h2> tag without breaking the <h2> tag into two lines?

The code in your question breaks to multiple lines as you've added an unecessary <nav> tag to it.
To achieve what you need without the line break, use jQuery to select the img within the h2, then you can use wrap() to add the anchor. Try this:
$('h2 img').wrap('');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Sample text<img src="test.png"></h2>
Note that the link above doesn't actually work when clicked because of the SAMEORIGIN X-Frame-Options that the SO domain has, but it would work in a full window.

Using only css. Here is a fiddle
<h2>Sample text<img src="https://lh3.googleusercontent.com/_o15gKsnxOAVksRFPKYBUmD5TSkf2twg62_zYnJSdOGueQ03zB8sR05zZyyLXycAtck=w300"></h2>
And the trick is only in your css:
a{
line-height: 0;
font-size: 0;
color: transparent;
}

You can use float:left for both nav and img for a simple solution.
h2 nav, h2 img{
float:left;
}
<h2><nav>Sample text</nav><nav><img src="https://www.w3schools.com/css/trolltunga.jpg" width="100px" height="100px"></nav></h2>

The way I do this is.
<img src="#" height=_ width=_ >
There are many other way. Using jquery as mentioned earlier.
But if you are a beginner.. this could help you.

Hope this works. Make sure to write this as your basis. This is just a sample.
.content {
position: absolute;
bottom: 0px;
height: 90px;
background: #ff9600;
width: 100%;
}
.content-block {
position: relative;
height: 70px;
}
.content-block img {
position: absolute;
bottom: 0px;
left: 10px;
}
<div class="content">
<div class="content-block">
<img src="images/sample.png" width="280" height="" alt="" />
<h2>ensure much better learning and development</h2>
</div>
</div>

Lazyload plugin against a background-image div is causing the content contained within the div to flicker when loading the image

I have a small but annoying issue. I'm using the Lazyload plugin for JQuery (Mika Tuupola - here) and I'm having an issue whereby using the fadeIn effect on a div background-image attribute causes the inner content to flicker when the image finally loads. It essentially reloads the content when the image loads. How do I avoid this?
My html extract:
<div class="wrap" id="wrap">
<div class="bg-image" data-original="images/image_1.jpg">
<h1>Some title here</h1>
</div>
<div class="bg-image" data-original="images/image_1.jpg">
<h1>Some other title here</h1>
</div>
<div class="bg-image" data-original="images/image_1.jpg">
<h1>another title here</h1>
</div>
</div>
My JS usage of Lazyload is against the container element because I have the structure above repeated several times (loading the same image):
$("div.bg-image").lazyload({
container: $("#wrap"),
threshold: 200,
effect: "fadeIn"
});
For the most part it works well but the flicker is off putting somewhat. Hopefully that's enough detail, I'll see if I can get a a sample fiddle going (you may have to bear with me on that ...)

I'm the creator of another lazy load plugin for jQuery. You can't solve the problem this way. The problem is, that, when the outer div fades, the content will always will fade too. There is nothing you can do to prevent this.
A possible solution is to put the background in another div in the back of the content boxes. So it will be visible as background, but it not really is. So there is an extra element for the background, which can be faded alone. Then the content will not fade too.
Here is a quick example of what I mean:
$(".bg").lazy({
threshold : 0,
effect : "fadeIn",
effectTime : 500
});
.wrap > div {
width: 500px;
height: 250px;
position: relative;
}
.bg {
width: 500px;
height: 250px;
position: absolute;
z-index: -1;
}
h1 {
text-align: center;
line-height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>
<div class="wrap" id="wrap">
<div>
<div class="bg" data-src="http://dummyimage.com/500x250/ff00a2/ff00a2&text=1"></div>
<h1>Some title here</h1>
</div>
<div>
<div class="bg" data-src="http://dummyimage.com/500x250/0099ff/0099ff&text=2"></div>
<h1>Some other title here</h1>
</div>
<div>
<div class="bg" data-src="http://dummyimage.com/500x250/45d104/45d104&text=3"></div>
<h1>another title here</h1>
</div>
</div>

Is there a way to spread one image across a collapsible div and its parent div?

In this JSFiddle, I have a button with an image in the background. If you click the button, a collapsed column springs out from the bottom.
What I'm looking to do is have that same background image dynamically re-size to fit the entire un-collapsed div once it's un-collapsed. Now, I understand that I could do a call like
$(this).addClass('imageUpdate');
when I want dynamically change the CSS for the header/button div, but this isn't exactly what I'm looking to do; I want the image to resize but to also map itself across the entire expanded column (and the header that it drops down from).
Is there any way that I can get around doing this? Or, as I suspect, can I not have an image span across multiple divs? If this is the case, what alternative would you recommend in order to achieve my goal? Thanks!
HTML
<div class="col-md-3" id="left-accordion">
<!-- first set of buttons -->
<div class="panel panel-default">
<div class="panel-heading" role="button" data-toggle="collapse" data-target="#baselayer">CLICK ME<br/>
<span style="font-size:1.25em;color:#fff;" class="glyphicon"></span>
</div>
<div class="collapse" id="baselayer">
<div class="well selections base-buttons" id="softbutton" role="button">Bulbasaur<br/>
<div class="selected">
</div>
</div>
<div class="well selections base-buttons" id="medbutton" role="button">Charmander<br/>
<div class="selected">
</div>
</div>
<div class="well selections base-buttons" id="firmbutton" role="button">Squirtle<br/>
<div class="selected">
</div>
</div>
</div>
</div>
</div>
CSS
.panel-default > .panel-heading {
color: #fff;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/English_Pok%C3%A9mon_logo.svg/2000px-English_Pok%C3%A9mon_logo.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: 110%;
border: none;
}

You do not need any JavaScript, but move the background to the conatining <div class="panel-default">. Then you remove the background of the elements above and you're good.
Example
CSS:
.panel-default > .panel-heading {
color: red;
background: transparent;
}
.panel-default .well{
background: transparent;
}
.panel-default {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/English_Pok%C3%A9mon_logo.svg/2000px-English_Pok%C3%A9mon_logo.svg.png');
background-repeat: no-repeat;
background-position: center;
background-size: 110%;
border: none;
}
Once you're done, copy the image to your own server for production use, instead of referencing to the one on Wikimedia.

Or, as I suspect, can I not have an image span across multiple divs
You can have your image as large as you want.
You just have to tell it, how large it should be, by changing the style.width and style.height attributes. (or background-size in your case)
This is what i would do by JS.
But you want to do it automatically - so I would attach the background-Image to you bigger container .panel-default
But then, the buttons are in front of it, so you would have to change the background-color etc of them ...