This question already has answers here:
How to center a "position: absolute" element
(31 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
How to center absolute div horizontally using CSS?
(9 answers)
Closed 1 year ago.
Is there a way to position an absolute positioned element centered to its' parent who is relative positioned?
I was thinking if somehow I can calculate the width of the parent, and based on that, center the child? But not sure where to start whether with JavaScript or css.
Here's the codepen for reference
.tooltip {
/*
position the top-left corner of the element
in the center of the parent
*/
position: absolute;
top: 50%;
left: 50%;
/*
move the (positioned) element up and left
by half its own width/height
*/
transform: translate(-50%, -50%);
}
.container,
.tooltip{
border: 2px solid black;
padding: 10px;
}
.container {
position: relative;
width: 80vw;
height: 50vh;
}
<div class="container">
<div class="tooltip">Tooltip</div>
</div>
top and left percentages are percentages of that dimension on the of the parentElement.
Whereas the percentages in translate are relative to the element itself.
This should center your tooltip
const tooltip = document.getElementById('tooltip');
const parentWidth = tooltip.parentElement.offsetWidth;
tooltip.style.left = (parentWidth - tooltip.offsetWidth) / 2 + 'px';
You can use left/right positioning with transform:translateX in order to put element in the center of it's parent. I've made below snippet by using your codepen example:
#container {
border: 1px solid gray;
}
#wrapper {
display: inline-block;
position: relative;
height: fit-content;
border: 1px solid red;
padding: 8px;
}
#tooltip {
border:1px solid green;
position:absolute;
bottom: -24px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap; /* to prevent break the text*/
}
<div id="wrapper">
Trigger Content, Trigger Content, Trigger Content,Trigger Content,
<div id="tooltip">I want to be a centered to my parent</div>
</div>
Edit: I think Thomas Answer contains the better way
Well it depends on your code if you want to do this css only, Here are several cases I came up with after doing my research:
1. If your div has a set size (width & height), According to this page you can take this steps:
Add left: 50% to the element that you want to center. You will notice
that this aligns the left edge of the child element with the 50% line
of the parent.
Add a negative left margin that is equal to half the width of the
element. This moves us back onto the halfway mark.
Next, we’ll do a similar process for the vertical axis. Add top: 50%
to the child
And then add a negative top margin equal to half its height.
In your case it looks like this:
#container {
border: 1px solid gray;
}
#wrapper {
display: inline-block;
position: relative;
height: fit-content;
border: 1px solid red;
padding: 8px;
}
#tooltip {
width: 100px; /* could be set by % aswell */
height: 10px;
border:1px solid green;
position:absolute;
left:50%;
top:50%;
margin-left: -50px;
margin-top: -5px;
bottom: -24px;
}
<div id="wrapper">
Trigger Content, Trigger Content, Trigger Content,Trigger Content,
<div id="tooltip">Center</div>
</div>
2. If it doesn't contain a set value but you want it to be centered anyway:
Not sure if it's a good way but you can use an absolute element inside wrapper before any other content, covering its parent and having its display value as flex and containing justify-content: center as well as align-items: center;
e.g. on your code:
#container {
border: 1px solid gray;
}
.full-flex{
width: 100%;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
}
#wrapper {
display: inline-block;
position: relative;
height: fit-content;
border: 1px solid red;
/* padding: 8px; */ /* I removed the padding so you can get a better understanding of this */
}
#tooltip {
border:1px solid green;
}
<div id="wrapper">
<div class="full-flex">
<div id="tooltip">Wanna be centered</div>
</div>
Trigger Content, Trigger Content, Trigger Content,Trigger Content,
</div>
Related
I need help keeping my CSS tooltip on screen for my website. It unfortunately is too big for the website near the edge of the screen and also is WAY too big for any mobile device and doesn't position correctly (probably because I plan to add very large descriptions in each tooltip). I would like to just use CSS but would be willing to use JS as I'm starting to think that may be the only way to do it correctly, but I'm having a lot of trouble figuring out how to make it work.
I basically had copied over the code from another website with many tweaks if it helps you understand my code better: https://www.w3schools.com/css/css_tooltip.asp
The only results I could find online were about centering the tooltip on the screen which strangely didn't work and code using SCSS which I'm not experienced with and would prefer not to use.
Here is my partial HTML and CSS code:
body {
overflow-x: hidden;
overflow-y: scroll;
}
.ref {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.ref .versekjv {
visibility: hidden;
width: 250px;
background-color: black;
color: #fff;
text-align: left;
padding: 5px;
border-radius: 6px;
z-index: 98;
position: absolute;
top: 100%;
left: 50%;
margin-left: -125px;
flex-direction: column;
}
.ref .versekjv::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.ref:hover .versekjv {
visibility: visible;
}
.redletters {
color:red;
}
#media screen and (max-width:1000px){
.ref .versekjv {
font-size: 1rem;
max-width: 20rem;
position: fixed;
bottom: auto; top: 13%;
left: 78%;
text-align: left;
transform: translate(-50%);
transform: translateX(-50%);
white-space: normal;
z-index: 98;
}
.ref .versekjv::after {
border-color: transparent;
}
}
<li class="box"><a>
<div class="innerbox">Reference</div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u></div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u>; <u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>Verse Num.</i> Verse Text</p></span></u></div>
</a></li>
Thank you so much for your help!
First, you need to get the DOM object of your tooltip,
let tooltip = document.querySelector(".ref .versekjv")
Then, you can use the js method "getBoundingClientRect", which gives you an object that has top, right, left and bottom fields which give you the distances of your element from top, right, left and bottom of the viewport. If your element is fully visible inside the element, all four fields would be positive numbers, otherwise it means it's partly invisible, for example a left field of "-10" means about 10px of length of your elements is beyond the left edge of the viewport.
What you can do is that you always check the top, left, ... distances of your element, and if they are negative numbers, manually change them and thus position your element correctly, which could be achieved like this:
tooltip.style.left = 20
This question already has answers here:
How to make round corners to both inside of a box and its border?
(12 answers)
Closed 2 years ago.
I need to create something like this in Html + CSS.
I think it's possible to make it in at least 2 ways:
1) Create the box with 4 rectangles and 4 rounded corners (it's more code, but it will be easy to fix position if I want to scroll background content).
2) Just create a background with that color and create a container in the center with scroll javascript in that div.
WWYD or is there another easier way?
P.S. On top of page, logo (left), buttons/pictograms (center) and profile (right) - I might add another container for it.
You can simply use 2 divs with a border and radius for the inner one. See here:
#inside {
border: 5px solid grey;
padding: 10px;
border-radius: 25px;
height: 200px;
background: grey;
}
#outside {
border: 5px solid grey;
padding: 10px;
background: black;
}
<div id="outside">
<div id="inside">
</div>
</div>
if you do not want to use 2 DOM use pseudo element :before
body{
padding: 15px;
}
div{
height:120px;
width:150px;
background-color:black;
border-radius:20px;
position:relative;
}
div:before{
content: '';
position: absolute;
height: 126%;
width: 120%;
background-color: red;
z-index: -1;
position: absolute;
top: -13%;
left: -10%;
}
<div></div>
Most of use knows that fixed elements are never relative to their parent, and are instead relative to the port size, and thus setting their width or height to 100% will make it relative not to their parent, but to the port size. There is a way around this, and that is to use the keyword 'inherit' instead in declaring its width, but there's one problem with this:
#wrap1 {
border: 1px solid black;
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
}
#fixed1 {
border: 1px solid red;
position: fixed;
width: inherit;
}
<div id = 'wrap1'>
<div id = 'fixed1'> fixed </div>
</div>
^---When the size of the fixed element's parent is declared in pixels, the fixed element matches the size of its parent, however...
#wrap2 {
border: 1px solid black;
position: relative;
width: 50%;
height: 250px;
margin: 0 auto;
}
#fixed2 {
border: 1px solid red;
position: fixed;
width: inherit;
}
<div id = 'wrap2'>
<div id = 'fixed2'> fixed </div>
</div>
^---You don't see the intended effect here, which is that the child will have exactly half of the parent's width, instead of having the same exactly width of the parent, because the width of it's parent is 50%, instead of in pixels. But when the code is isn't run on SO's code snippet, this is exactly what you will see.
Is there a way for a fixed positioned child to have the same exact width of its parent, when its parent's width is declared in percentages?
The reason here is that an element with a fixed position is relative to the viewport - and percentage width measurements are computed relative to the viewport itself. In your percentage example, the parent's width: 50% is computed relative to the body, minus the body's 16px margin. Your fixed element inherits width: 50% from its parent, but the percentage is computed relative to the entire viewport, which completely wraps around the body and its margin (hence the fixed element extends past its parent).
One solution that can give the fixed element its parent's width, is to remove the margin from the body.
body {
margin: 0;
}
#wrap2 {
border: 1px solid black;
position: relative;
width: 50%;
height: 250px;
margin: 0 auto;
}
#fixed2 {
border: 1px solid red;
position: fixed;
width: inherit;
}
<div id = 'wrap2'>
<div id = 'fixed2'> fixed </div>
</div>
change your #fixed2 CSS style as below.
#fixed2 {
border: 1px solid red;
position: inherit;
width: 100%;
margin: 0 auto;
}
I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel.
here is a exemple from a slider. How can I align text like this and stay at any screen resolution at the same place. I use top: x, right: x but every time when I resize the window, text climb above and not stay at middle anymore.
CSS for align
.carousel-caption {
position: absolute;
right: 15%;
bottom: 40%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
Just basic bootstrap slider. But If I use bottom 40% for exemple to rise text at middle of the page works. But if I use smaller displays the text rise and stay almost on top.
In this exemple text stay fixed on every device.
<div class="wrap">
<div class="display-table">
<div class="display-cell">
<h1>Title in here</h1>
</div>
</div>
</div>
<style>
.wrap {
width: 100%;
height: 400px;
}
.display-table {
width: 100%;
height: 100%;
display: table;
}
.display-cell {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
</style>
This allows fixed vertical alignment and should work cross browser. Just note the fixed height applied to .wrap must be present for the children to inherit 100% height!
Hope this helps :)
Hope, Try this demo that centers text vertically in the Bootstrap carousel.
Here is the Fiddle.
All I do here is give the div a height that contains the text and then position it with this css...
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}
I want to have the effect like dropbox:https://www.dropbox.com/ where my website is centered in the exact middle of the page.
Achieving this effect is way more complicated than it should be. Here's a bare-bones working example: http://jsfiddle.net/JakobJingleheimer/UEsYM/
html, body { height: 100%; } // needed for vertical centre
html { width: 100%; } // needed for horizontal centre
body {
display: table; // needed for vertical centre
margin: 0 auto; // needed for horizontal centre
width: 50%; // needed for horizontal centre
}
.main-container {
background-color: #eee;
display: table-cell; // needed for vertical centre
height: 100%; // needed for vertical centre
// overflow: auto; // <- probably a good idea
vertical-align: middle; // needed for vertical centre
width: 100%; // needed for horizontal centre
}
.container {
background-color: #ccc;
padding: 20px;
}
If you want to achieve this:
Here are different methods, with the pros/cons of each one, for centering a page vertically. Choose which one you prefer:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
EDIT. As suggested, I will proceed to explain one of the methods. It only works if you already know the height/width of the element to center (the link includes more methods). Assuming all your content is within <body>, and that your content is 900px x 600px, you can do in your css:
html {
width: 100%;
height: 100%;
}
body {
width: 900px;
height: 600px;
position: absolute;
top: 50%;
margin-top: -300px; /* Half of the height of your body */
}
However, this falls short for dynamically generated content, since you don't know the height of it. I've used it succesfully on log-in box pop-up and settings pop-up.
Another method I've used in the past for the whole page is the Method 1 from the link. It makes a set of divs to behave as a table, which can vertical-align to the middle.
If you want to align it vertically center, please check this web page: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you know the width and height of your page
then wrap your contents in following div css
.center
{
position:absolute;
top:50%;
left:50%;
margin-left: -(yourPageWidth/2);
margin-top: -(YourPageHeight/2);
}
On your topmost div give margin:0 auto 0 auto; Also define some width to that div.
First create a main container of the desired width and then put all your code inside the main container. For Eg.
<body>
<div id="container">
......... your code
</div>
</body>
And in the css
#container{
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
You can change the width as per your needs
<body>
<div class="container">
......... your code
</div>
</body>
#container{
width: 700px ;
margin:0 auto ;
padding:0px;
}
Try this:
html
<span id="forceValign"></span><!--
--><div id="centerMiddleWrap">
<div id="centered">Hello this is some text. Hello this is some text. Hello this is some text.</div>
</div>
CSS
html {
height: 100%;
background: #eee;
}
body {
margin: 0;
height: 100%;
/*important*/
text-align: center;
}
#centerMiddleWrap {
/*important*/
display: inline-block;
vertical-align: middle;
}
#forceValign {
/*important*/
height: 100%;
display: inline-block;
vertical-align: middle;
}
#centered {
background: #000;
color: #fff;
font-size: 34px;
padding: 15px;
max-width: 50%;
/*important*/
display: inline-block;
}
Here is an demo
Wrap a div and define its width, use margin:0 auto for centering the div.
You can check a site's CSS by using Firebug or browser extensions.