I have a div nested in a div. I am trying to display some text and that works. However what I want is that the text is center aligned i.e. it has a left: -50%. But it does nothing. But when I do something like left: 20px then the text moves left by 20px. How can I achieve moving my div left by 50%?
Even with position relative I have no change
.currentText{
position: relative;
margin-left: -50px;
}
using float destroys my display
.currentText{
float: left;
margin-left: -50px;
}
My html (jsx in my case) is:
<div style={{ marginLeft: `${currentPer}%`, marginRight: `${100 - currentPer}%` }}>
<div className={s.currentText}>
{intl.formatMessage(messages.boo)}
</div>
</div>
<div style={{ marginLeft: `${currentPer}%`, marginRight: `${100 - currentPer}%` }}>
<div
className={s.down}
/>
</div>
Do you want to get something like that ? :
https://jsfiddle.net/nL7bjgbx/20/
i've used jQuery to get the witdh of the child div & offset it of half the value
var widthDiv = $(".childDiv").css('width');
var rule = '-'+(widthDiv.replace("px", "")/2)+'px';
$(".childDiv").css('margin-left', rule);
If you want just the text to be aligned center add this .targetText { text-align: center }
If you have nested divs, you could use positioning like below.
.outer {
width: 300px;
height: 100px;
background: #ccc;
position: relative;
}
.inner {
width: 150px;
height: 50px;
background: #f0f;
position: absolute;
left: 50%;
margin-left: -75px;
top: 50%;
margin-top: -25px;
text-align: center;
}
<div class="outer">
<div class="inner">Text</div>
</div>
Related
Is it possible to make an element with position: absolute; have the full height of its parent, including overflowed content?
In the following code snippet the .line element gets cut off when scrolling the .container:
.container {
position: relative;
height: 150px;
width: 300px;
overflow-y: scroll;
}
.line {
position: absolute;
background: #000;
width: 2px;
left: 50%;
height: 100%;
}
<div class="container">
<div class="line"></div>
<div style="height: 500px;"></div>
</div>
Adding another wrapper can solve the issue:
.container {
height: 150px;
width: 300px;
overflow-y: scroll;
}
.container > div {
position: relative;
}
.line {
position: absolute;
background: #000;
width: 2px;
left: 50%;
height: 100%;
}
<div class="container">
<div>
<div class="line"></div>
<div style="height: 500px;"></div>
</div>
</div>
The height: 100%; of the absolutely positioned element refers to the given CSS heigth (i.e. the height defined in the CSS rule) of the relative parent, not to its stretched "real height" when it overflows. So it will always have the initial parent height which is defined via CSS.
To achieve what you want, you'd have to get the parent height via javascript and apply it to the child.
In this jsfiddle I want to make it so that the red box always stays aligned with the right edge of the gray "footer" box, regardless of how the width of the "footer" box changes. That is, the red box is in the correct place initially, but when you click the "extend footer" button, the "footer" box gets longer, and the red box doesn't move with it (because I have it as position absolute right now).
How can I make the red box be fixed to the right edge of the gray "footer" box?
Code for jsfiddle:
HTML:
<div class="footerContainer">
footer
<div class="aboveFooter"></div>
</div>
<button id="btnClick">
Extend footer
</button>
CSS:
.footerContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 0;
bottom: 0;
}
.aboveFooter {
position: absolute;
bottom: 82px;
left: 52px;
height: 50px;
width: 50px;
background-color:red;
}
JS:
$('#btnClick').on('click',function(){
$('.footerContainer').html($('.footerContainer').html() + ' longer');
});
You're using left: 52px which will position the red box 52px from the left relative to the positioned parent (.footerContainer). To keep it flush on the right edge, use right: 0;
$('#btnClick').on('click',function(){
$('.footerContainer').html($('.footerContainer').html() + ' longer');
});
.footerContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 0;
bottom: 0;
}
.aboveFooter {
position: absolute;
bottom: 82px;
right: 0;
height: 50px;
width: 50px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footerContainer">
footer
<div class="aboveFooter"></div>
</div>
<button id="btnClick">
Extend footer
</button>
Firstly, I know this may seem like a duplicate of Positioning child content outside of parent container, but this is slightly different.
I've only had success floating an image outside of its parent container if I use an absolutely positioned div with the background-image set. Example of code used to achieve this:
.image {
position: absolute;
top: 0;
left: 0;
margin-top: -30px;
margin-left: -10px;
display: block;
height: 200px;
width: 140px;
}
Now I need to achieve the same with an <img /> element. What I'm hoping to achieve is something like this:
So the image should actually spill over on the left and right of the parent container. I've tried similar methids as given above, but without success. Any advice?
something like this?
.parent {
display:inline-block;
width: 100px;
height: 300px;
background-color:lightgray;
margin-left: 100px;
}
.child {
width: 200px;
height:100px;
border-radius: 100px;;
background-color:gray;
position:abolute;
margin-left: -50px;
margin-top:100px;
}
<div class='parent'>
<img class='child'/>
</div>
edit: as per the comments below this is what i see
See the method bellow
Wrap the image in a DIV
Add border-radius to achieve the egg like shape
Add overflow with a value of hidden to the image container
use an image that's bigger than it's container so that it will take on the egg like shape.
#square {
width: 300px;
height: 300px;
background-color: #6D9BBE;
position: relative; /* Relative to curtail overlap */
margin: 0 auto;
}
#square #eggy {
width: 380px;
height: 200px;
background-color: #8500B2;
border-radius: 50%;
position: absolute;
top: 50px;
left: -40px;
overflow: hidden;
}
#eggy img {
width: 390px
height: 240px;
}
<div id="square">
<div id="eggy"><img src="http://s9.postimg.org/xnmcpb0jz/use_this.png"/></div><!-- End Eggy -->
</div><!-- End Square -->
I have a div element wrapping other div elements like so:
<div style="overflow:hidden">
<div id="a"></div>
<div id="b"></div>
</div>
I have other css rules that manage the dimensions of the outer div. In my actual code, I want to position the div#a exactly 10 px below the outer div. However, I want div#b to still be cut off by the outer div's overflow:hidden.
What is the best way to achieve this?
Method 1
A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:
.parent {
position: relative;
.fixed-wrapper {
position: absolute;
.fixed {
position: fixed;
}
}
}
One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.
Method 2
Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:
http://jsfiddle.net/kv0bLpw8/
#wrapper {
width: 400px;
height: 50px;
position: relative;
z-index: 1000;
left: 0px;
top: 0px;
}
#wrapper #insideDiv {
width: 400px;
height: 50px;
overflow: hidden;
position: absolute;
z-index: 2000;
left: 0px;
top: 0px;
}
#wrapper #a {
position: absolute;
height: 30px;
width: 100px;
bottom: -40px;
z-index: 1000;
left: 0px;
}
<div id="wrapper">
<div id="a">AAA</div>
<div id="insideDiv">
<div id="b">BBB</div>
</div>
</div>
The easiest and most convenient way is to wrap your container div inside another div and set position: relative on the external div.
.outer-container {
position: relative;
height: 50px;
}
.container {
background: gray;
overflow: hidden;
height: 50px;
}
#a,
#b {
height: 100px;
width: 100%;
}
#a {
background: green;
position: absolute;
top: 60px;
}
#b {
background: red;
font-size: 60px;
}
<div class="outer-container">
<div class="container">
<div id="a"></div>
<div id="b">Cut off</div>
</div>
</div>
as people said, the element must be presented outside the parent in order to be not cropped. But you can do this with JavaScript to achieve the similar concept without having to change your actual markup:
function breakOverflow(elm) {
var top = elm.offset().top;
var left = elm.offset().left;
elm.appendTo($('body'));
elm.css({
position: 'absolute',
left: left+'px',
top: top+'px',
bottom: 'auto',
right: 'auto',
'z-index': 10000
});
}
then pass the element you want to exclude from the cropping of its parent:
breakOverflow($('#exlude-me'));
I have a GoogleMaps on my website.
My problem is CSS, how to do a CENTERED div that is positioned over Google Maps?
<div style="position:relative">
<div style="width:300px; height:300px" id="map_localization"></div>
<div style="position:absolute; width:100px; margin:0px auto;">CENTERED</div>
</div>
This is what almost works for me, but need to put the CENTERED layer OVER the map
Can you reveal some code?
I would do it by putting both the map and the div to be centered within a relative positioned div. Then I would absolute position both the map and the div inside.
I would center the div inside with absolute positioning: http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/
Specifically, the CSS of the div to be centered would look something like this.
#divToBeCentered {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}
Update
Actually, this fiddle I made illustrates what I meant by putting both the map and another div in a containing div:
http://jsfiddle.net/2zaxd/
Here's the HTML (similar to what you had).
<div id="containerForAll">
<div id="map_localization"></div>
<div id="divToBeCentered">CENTERED</div>
</div>
and the CSS.
#containerForAll, #map_localization, #divToBeCentered {
border: 1px solid #000;
}
#containerForAll {
position: relative;
width: 300px;
height: 300px;
}
#map_localization, #divToBeCentered {
position: absolute;
}
#map_localization {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#divToBeCentered {
width: 100px;
height: 100px;
margin-left: -50px;
left: 50%;
top: 50%;
margin-top: -50px;
}
This centers the inner div above your map via absolute positioning.