https://jsfiddle.net/0qjg6fat/1/
Still nothing?
How do you position a DIV central in another DIV?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you position a DIV central in another DIV?
I've just cracked it. I had a brainwave while out for a walk.
The reason i needs to be in the centre is because the image pushes it out.
the DIV in the "center" is using absolute positioning and some tricker to place it there. So, I have set the 'shown' image to be in the right div container, opacity to 0, and width to be 100%.
It now fits. And if one of the other rows of images differ, it's fine, as it's that image I am using with opacity of 0.
Odd way to do it, but uses no Javascript!
The reason i needs to be in the centre is because the image pushes it out.
the DIV in the "center" is using absolute positioning and some tricker to place it there. So, I have set the 'shown' image to be in the right div container, opacity to 0, and width to be 100%.
It now fits. And if one of the other rows of images differ, it's fine, as it's that image I am using with opacity of 0.
Odd way to do it, but uses no Javascript!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you position a DIV central in another DIV?
Oddly, using that method doesn't work terribly well on Safari.
It seems to put the centered box in the bottom right corner.
It works on all browsers, by placing the viewed image on the right, and the next in the centre of the left DIV.
The left div is stretched out by the image in the background, set to opacity: 0;.
It seems to put the centered box in the bottom right corner.
Code: Select all
<style>
.home-left
{
font-size: 1.2em;
position: relative;
}
.home-left h3
{
margin: 0px;
padding: 0px;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
font-weight: 300;
text-align: center;
color: #A4781C;
font-size: 25px;
}
.home-left h2
{
margin: 0px;
padding: 0px;
text-transform: uppercase;
font-family: 'Titillium Web', sans-serif;
font-weight: 300;
text-align: center;
color: #A4781C;
font-size: 25px;
}
.home-left-text
{
width: 48%;
float: left;
position: relative;
height: auto;
}
.home-left-text-inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* unnecessary styling properties */
max-width: 50%;
text-align: center;
margin: 0px;
padding: 0px;
}
.home-left-image
{
text-align: left;
float: right;
width: 50%;
margin-left: 10px;
position: relative;
}
.home-left-image img
{
width: 100%;
display: block;
}
</style>
<div class='home-left'><a href='/url'>
<div class='home-left-text'><img src='/images/pages/home-yacht1.jpg' class='home-text-trans'/>
<div class='home-left-text-inner'><h3>interior applications</h3>
Welcome text here to be dynamic and have lots of content on this page and look so nice and special your code and my text and design how can this,
</div>
</div><div class='home-left-image'><img src='/images/pages/home-yacht1.jpg' id='home-stoneselector-image'/></div>
<div style='clear: both' ></div></a>
</div>
The left div is stretched out by the image in the background, set to opacity: 0;.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you position a DIV central in another DIV?
Found the fix.
It works with the "transform:" element of the class that sets the central DIV.
although this website is not in English, the answers are in there in a CSS section.
It's similar to other CSS where you have to enter different code for different browsers.
http://www.michaelloy.de/jquery-sidr-io ... ement.html
It works with the "transform:" element of the class that sets the central DIV.
although this website is not in English, the answers are in there in a CSS section.
It's similar to other CSS where you have to enter different code for different browsers.
http://www.michaelloy.de/jquery-sidr-io ... ement.html
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you position a DIV central in another DIV?
Yep. Safari is the new IE. Yay front end!simonmlewis wrote:Oddly, using that method doesn't work terribly well on Safari.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: How do you position a DIV central in another DIV?
Yep.
It also dislikes Titillium Web font. A little bit "bitty" on screen. On a windows machine anyway.
It also dislikes Titillium Web font. A little bit "bitty" on screen. On a windows machine anyway.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.