Is it possible to an center a div horizontally, if that div is also absolute? The following works great in Chrome/Safari/Firefox, but in IE8 it sits to the far left:
.holder-answers {
position: absolute;
display: none;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top: 200px;
width: 501px;
}
Can you not try:
.holder-answers {
position: absolute;
top: 200px;
left: 50%;
width: 501px;
margin-left: -250px; /* half the box width */
}
This method should work in all browsers.
Related
I have some problems with an iframe centering.
The code is setup to keep the same ratio, so it is 100% reposonsive.
This also causes VERY LIMITED possibilies for adding formattiong and - Centering
I have tired to both add a container box, and changing the css styling but I cant seam to get it to work...
any idears
<div class="background background_video">
<div id="video_container">
<div class="youtube-video-container">
<iframe class="youtube-video" src="https://www.youtube.com/embed/8aGhZQkoFbQ"></iframe>
</div>
</div>
</div>
.youtube-video-container {
padding-top: 56.25%;
height: 0px;
position: relative;
}
.youtube-video {
width: 60%;
height: 60%;
position: absolute;
top: 0;
left: 0;
border: 0;
}
.youtube-video-container {
height: 300px; // some height
position: relative;
}
.youtube-video {
width: 60%;
height: 60%;
position: absolute;
bottom: 0;
left: 0;
border: 0;
display: block;
}
as I correct understand question
FROM ANOTHER POST I FOUND...
Thanks for the trying to help anyways guys!
Without knowing the width/height of the positioned1 element, it is still possible to align it as follows:
EXAMPLE HERE
.child {
position: absolute;
top: 50%; /* position the top edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand of
translateX(-50%) and translateY(-50%) */
}
It's worth noting that CSS Transform is supported in IE9 and above. (Vendor prefixes omitted
In this responsive 16:9 youtube css, all parents of #video_container have to be set to an height 100%.
Click on Run code, then 'Full page' to see the result.
html, body {
height: 100%;
margin: 0;
}
.background_video {
height: 100%;
display: flex;
}
#video_container {
width: 60%;
margin: auto;
}
.youtube-video-container {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
.youtube-video-container::before {
display: block;
content: "";
padding-top: 56.25%;
}
.youtube-video-container iframe {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
<div class="background background_video">
<div id="video_container">
<div class="youtube-video-container">
<iframe class="youtube-video" src="https://www.youtube.com/embed/8aGhZQkoFbQ"></iframe>
</div>
</div>
</div>
#logo-center {
max-width: 100%;
height: auto;
display: flex;
}
#media only screen and (min-width:991px) {
.logo-div {
-webkit-margin-start: -5%;
-webkit-margin-end: -15%;
-webkit-margin-before: -6%;
left: 40%;
top: 40%;
right: 40%;
position: absolute;
z-index: 100;
display: flex;
}
}
#media only screen and (max-width:990px) {
.logo-div {
-webkit-margin-start: -5%;
-webkit-margin-end: -15%;
-webkit-margin-before: -6%;
left: 40%;
top: 42%;
right: 42%;
position: absolute;
z-index: 100;
}
}
#media only screen and (max-width:700px) {
.logo-div {
left: 38%;
top: 43%;
right: 40%;
position: absolute;
z-index: 100;
}
}
#media only screen and (max-width:500px) {
.logo-div {
left: 35%;
top: 42%;
right: 40%;
position: absolute;
z-index: 100;
}
}
<div class="logo-div">
<div id="logo-center"><img style="border-radius: 7%;" src="https://www.crockerriverside.org/sites/main/files/main-images/camera_lense_0.jpeg"></div>
</div>
https://jsfiddle.net/8rmL5a7f/
I need to resize image at center (so to be responsive in mozilla/chrome/ie)) and set it at the center of page to cover the cross where the table border meets.
My code works only on firefox, but not in chrome or IE.
Anyone can help me to know why?
As you don't set the width of the image and your image is really big they overflow the wrap div.
Do this:
#logo-center img {
width: 100%;
height: auto;
}
The height:auto will keep the ratio of the image.
On my computer (Windows) at chrome before:
On my computer (Windows) at chrome after:
To centre image in the div:
You will need to make the .table-responsive.bordered.fill and .logo-div the same width and height and than:
#container {
position: relative;
}
#container .logo-div {
postion: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
And please delete the right property on .logo-div.
Basically, the top and left 50% will align in the middle but considering the borders. To put in the middle considering the centre of element you will need to use transform: translate top -50% and left -50% because this will move back based on the child element (.logo-div) size and not the parent (#container) or the border of the child.
PS: You can do it with a negative margin or flexbox (justify-content and align-items on centre). But I normally use this presented solution with translate.
http://lucasdebelder.be/googledoodle/
I want to have the planet (bottom image) on top of the top image (the blue background/space). I have a main div class:"center" set on 'position: absolute' and around both of those images is separately a div wrapped with position: relative; but somehow they don't want to go and sit on top of each other, I've also tried it with z-index but that doesn't work either.
Thanks in advance.
Use these properties the planeet_achtergrond class:
.planeet_achtergrond{
position: absolute;
bottom: 150px;
}
I would recommend nesting the two images in a div then adding a class to each image. Then use margin: 0 auto to center the div to the page. This is my solution:
#googledoodle {
position: relative;
top: 0;
left: 0;
height:512px;
width:900px;
margin: 0 auto;
overflow: hidden;
}
.galaxy {
position: relative;
top: 0;
left: 0;
}
.planet {
position: absolute;
top: 380px;
left: 0px;
}
<div id="googledoodle">
<img src="http://lucasdebelder.be/googledoodle/images/galaxy.png" width="900" class="galaxy">
<img src="http://lucasdebelder.be/googledoodle/images/planeet.png" width="950" class="planet">
</div>
i changed all css. Here sample:
.center {
position: relative;
text-align: center;
width: 900px;
margin: auto;
overflow: hidden;
height: 500px;
}
.space_achtergrond {
width: 100%;
z-index: 0;
position: absolute;
height: auto;
bottom: 0;
}
.planeet_achtergrond {
width: 100%;
height: auto;
z-index: 100;
position: absolute;
bottom: -15px;
}
form {
position: absolute;
bottom: 15px;
z-index: 999;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
use overflow:hidden outer div.
if you want place divs inside a div with position:absolute, use position:relative for parent div.
if you want to stick a div bottom, use only bottom:0
I'm trying to solve my problem since one week, and I really try everything !
I have a two column layout (left: content / right: description of the content).
I want this two columns full height page and the only way I found is :
body {
margin: 0;
height: 100%;
padding: 0;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
text-align: right;
}
The closest way to center a div in my columns was to use (in CSS3) flexbox. But there is conflicts with the absolute position of my columns.
Here's the bootply I made to be more explicit :
http://www.bootply.com/1OovYNhx1E#
In this example, I'd like to center (horizontally and vertically) the <h1>TEXT</h1>
UPDATE
Bootply is a terrible tool. So I used Plunker to replicate your example. This includes Bootstrap and everything you had originally except:
.fluid-container and .row are combined.
#inner is now moved out of #leftcol
#inner has the rulesets previously mentioned.
Both columns changed height: 100vh
Added position: relative to body.
Added width:100% and height:100% to html and body elements.
#inner {
position: absolute;
left: 50%;
top: 50%;
bottom: -50%; /* This was added to offset the top: 50% which was keeping the #inner from scrolling any further to the top. */
transform: translate(-50%, -50%);
z-index: 9999;
}
PLUNKER
OLD
Use the following ruleset on your center element:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
You weren't clear as to where this centered div should be center in relation to. If you want it to be centered in relation to viewport, (i.e. edge to edge of screen) then the center div shouldn't be inside any column. I f you want it centered within the left column, then it's in the correct place. Regardless, if you use this solution it will center itself perfectly inside of whatever you put it into.
SNIPPET
body {
position: relative;
margin: 0;
height: 100%;
padding: 0;
}
#leftcol {
position: absolute;
top: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: left;
background: brown;
}
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100%;
width: 50%;
text-align: right;
background: yellow;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
outline: 3px solid red;
width: 25%;
height: 25%;
background: rgba(0,0,0,.4);
}
<div id='leftcol'></div>
<div class='center'></div>
<div id='rightcol'></div>
Finally find the answer HERE
With flexbox just add to your inner container :
margin: auto;
It will prevent the top scroll problem !
I'm having trouble with absolute positioning an image in a relative positioned div. The image should be centered within the div. For this I use following css
div
{
position: relative;
top: 0px;
left: 0px;
}
div img
{
margin-top: -10px; /*img width is 20px*/
position: absolute;
top: 50%;
}
This works great on all browsers except Firefox.
Is there any workaround for this? Because i searched already a lot for this and i can't figure something out.
PS: Don't say to me to use line-height. Because there is also text next to the image. So this option will not work for me.
For the image you say top: 50%. 50% of what? It should be 50% of the parent element. What is the parent element set to? If it's not set to anything, therein lies the problem.
why not do something like this
div
{
position: relative;
top: 0;
left: 0;
}
div img
{
position: relative;
top:25%;
left:50%;
}
The relative for the image means 25% from the top of the div and 50% for the left side.
Try putting it as a background image if you just want the image there.
div
{
background-image: url('image.jpg');
background-position: center;
background-repeat: no-repeat;
margin: 0px auto;
position: relative;
width: Xpx;
height: Xpx;
top: 0px;
left: 0px;
vertical-align: middle;
}
and for the text use a div inside and position it using margin, padding or whatever.
How about auto margins:
div img
{
margin-top: -10px; /*img with is 20px*/
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
This works for me in firefox 7
This is a good article on the subject from CSS-Tricks:
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
Test this:
div {
position: relative;
top: 0px;
left: 0px;
background: red;
width:500px;
}
div img {
margin-top: -10px;
//position: absolute; /*get it out*/
display: block; /*Important*/
margin: auto; /*Important*/
top: 50%;
}