I have a div with "position: absolute" and a title inside. If the title is long, a break line is automatically applied even though the div width may increase.
I set the property max-width: 100% so that the text is added to the line only when we reach 100%.
Unfortunately, the text breaks at random.
Here are the properties of the absolute div:
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 1px);
The current rendering
Do you have a solution ?
Sorry for my english, i am working to improve it
Set the display: flex for your div. By the way position: absolute doesn't work with what I have suggested. Or you can try making your text in the div float and your div should have overflow: hidden.
Related
I am having problems getting the grasp of position: absolute
I understand that it positions itself according to the position of its relative parent. So what is wrong with my example? when clicking on the first ".col-lg-6", why is the faded blue line not centered on the right col?
Please could you rework the code and explain why this is happening?
.formWrapper
{
background: blue;
height: 100vh;
position: relative;
margin: 0;
}
.formWrapper .contactForm
{
width: 750px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: yellow;
}
<div class="formWrapper">
<div class="contactForm row">
<div class="col-lg-6"><h1>HI</h1></div>
<div class="col-lg-6"><h1>HI</h1></div>
</div>
</div>
I can't rework the code and give you what you want exactly, because I don't see the faded blue line you're talking about. But, I will explain what is going on with your code, as I see it.
HTML Markup
<div class="formWrapper">
<div class="contactForm row">
<div class="col-lg-6"><h1>HI</h1></div>
<div class="col-lg-6"><h1>HI</h1></div>
</div>
</div>
.formWrapper
{
background: blue;
height: 100vh;
position: relative;
margin: 0;
}
You have a .formWrapper div colored blue. It takes up the full screen, and you've positioned it relative. Positioning it relative provides an anchor for its child element to use when defining its own position as absolute (necessary).
.formWrapper .contactForm
{
width: 750px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: yellow;
}
You've defined the a fixed width and height of the yellow .contactForm div and colored it yellow.
By defining position: absolute, with top:50% and left:50%, the top left position of the .contactForm div would appear in the very middle of the .formWrapper div. However, you've also added the transform: translate(-50%, -50%) style, which moves the .contactForm div to the left 50% of its own width and up 50% of its own height.
Important
The position: absolute style that you've set in the parent of the div.col-lg-6 elements does not affect the children's positioning within that element. Position absolute only directly affects the actual element to which you've applied this style, changing its position in reference to its own parent, or the closest parent that has a position style defined.
Position Fixed
If your goal is to have a pop up that sits in the center of the screen, then you might want to use position: fixed, which positions the element relative to the window. This way you don't have to worry about the effects of other elements.
You could position the popup in the middle of the view the same way you positioned the .contactForm div in the middle of the its parent div.
Bootstrap
If you are using bootstrap or any other css framework, you may want to consult their documentation on how to accomplish your goals. Frequently, when using a css framework, adding your own custom styles that affect the sizes and positioning of elements can have consequences that are difficult to manage.
By setting a position of absolute or fixed, you might break the expected flow of the rest of the css. So, only do it when there is no standard way of doing what you need and you know the consequences.
I've successfully gotten a video to properly fit inside a div and fill it completely all the time thanks to this SO answer.
I've modified the code just a bit but I'm stumped as to why this code works.
video
position: absolute
opacity: 0.1
z-index: 0
top: 0px
left: 50%
min-width: 100%
min-height: 100%
right: 0px
margin: auto
width: auto
height: auto
overflow-x: hidden
transform: translateX(-50%)
I don't get what the transform does and how to get it to fix to something other than the top-left corner. I think there's something about the min- properties that makes this work but I'm not sure.
An absolutely positioned element's position in relation to its parent element (which can also be the browser window) is defined by the top or bottom and left or right parameters (default is top: 0; left: 0;). If left is 50%, it means the left border is moved exactly to the horizontal middle of the container. transform: translateX(-50%) moves it back to the left (caused by the minus value) by 50%, but this time by 50% of the element itself. This causes the element to be ecactly centered horizontally. overflow-x: hidden; makes sure the element doesn't overlap its container - overflowing parts will remain invisible.
You could do the same vertically with top 50%; transform: translateY(-50%); overflow-Y: hidden;
I have a little problem trying to vertically center a child div inside its parent. I'm using this mixin:
#mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
But it seems that the "top: 50%" instruction is not working. I think that it may be because the parent div height is set to auto (it only has "min-height: 100%").
Any idea of how I can solve this problem?
Thanks in advance!
Make sure the parent element has position: relative and change your code (the child element to be centered) to position: absolute. That should to the trick. Also take a look at this article on centering in CSS. Hope this helps!
I want to position a main container in the middle of the viewport.
The container is absolutely positioned, because I want it to fill up the whole vertical space by using position: absolute;top: 0;bottom: 0 (I know that I could achieve a similar effect by using height:100% on html, body, main, but as soon as the content of main exceeds the full height, the main container won't stretch at these exact 100%, which is not what I want).
So to position the absolutely positioned main container in the middle of the viewport, I rely on transform: translateX(-50%), which works painlessly - except in Internet Explorer, which adds an unwanted horizontal scrollbar!
Take a look at this pen:
http://codepen.io/jmuheim/pen/wCzcr
Is there any way to prevent the horizontal scrollbar? overflow-y: none doesn't seem to work.
I faced the same issue some days ago. It appears that it's a bug and the easier way to fix it, it's to position your element from the right instead of the left.
To use your example, the result will be :
main {
position: absolute;
top: 0;
right: 50%;
bottom: 0;
width: 50%;
background-color: red;
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
You can try it live there : https://jsfiddle.net/julienvanderkluft/3udza0te/
You just need to change 2 things.
right: 50%;
transform: translateX(50%)
If you want to center your element horizontally and vertically, you can use something like this as well.
.parent {
display: flex;
}
.child {
margin: auto;
}
<div class="parent">
<div class="child">
<span>Center</span>
</div>
</div>
How can I align a DIV to the center of my page while its position is absolute? If possible without using javascript.
UPDATE: This is an old answer and the answer currently just below this gives a nicer solution which works even if your div has dynamic width. Another alternative, using margin: auto, can be found here, on a different, but related, question.
You can do this if you know the width of the DIV you want to centre.
CSS:
div
{
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 300px;
margin-top: -150px;
margin-left: -200px;
}
You position the top left corner in the centre, and then use negative margins which are half of the width to centre it.
position: absolute;
left: 50%;
transform: translateX(-50%);
Try this:
position: absolute;
width: 600px;
left: 50%
margin-left: -300px;
It's not possible to get HTML to automatically center anything that is absolutely positioned. Heck, HTML barely centers anything horizontally using CSS margins :-)
As the name implies absolute positioning is absolute where you get top and left fixed positions and any margins are applied relative to those positions. Auto is ignored with absolute positioning.
There are solutions using JavaScript and jQuery. Here's one that I wrote and use a lot:
jQuery .centerInClient() plugin
Hope this helps.
The meaning of position: absolute is exactly that you want to specify how far from the margins of the page your div should be placed. Since you do not know the width of the screen a priori, there is no way to center it.
I guess you just want to remove the div from the page flow, while keeping it centered. In this case it may be enough to add a container div, like
<div id="external">
<div id="internal">
</div>
</div>
and the CSS
#external {
position: absolute
}
#internal {
margin: 0 auto
}
I did not test the above layout, but I think it should work.
Here's a simple method using percentages:
div {
width: 80%;
position: absolute;
left: 10%;
}
Simply set your desired page width, and set the left margin as half of the remainder. In this case, the width is 80%, leaving 20%. Set left:to 10% and it will center the div on the page.
Using this method will allow the div to scale with different window sizes and screen resolutions as well.