This question already has answers here:
Why magin:auto is not enough to center position absolute or fixed?
(3 answers)
Center a position:fixed element
(23 answers)
Closed 2 years ago.
Here is the CSS:
#indicator {
position: fixed;
top: 40%;
width: 150px;
margin: 0 auto;
z-index: 1000;
padding: 2px;
background: #fff;
}
Whenever I apply it, the content stays hard left, not centered. I have tried it with block elements (such as P and H1), and inline elements (such as span).
When I check the HTML inspector I can see that the rules are being applied as expected, and none are being overridden.
By default, margin auto wont work with fixed elements. To make the margin auto value work with fixed elements, add left:0 and right:0 to your CSS values.
Attached a code snippet for your reference.
#indicator {
position: fixed;
top: 40%;
left: 0;
right: 0;
width: 150px;
margin: 0 auto;
z-index: 1000;
padding: 2px;
background: red;
}
<div id="indicator">
</div>
Because margin:auto only works with position:relative.
To make a fixed div to work with margin:auto, add left: 0; right:0; to your div.
#indicator_relative {
position: relative;
margin: 0 auto;
background: #0f0;
width: 10px;
height: 10px;
}
#indicator_fixed {
position: fixed;
margin: 0 auto;
background: #f00;
width: 10px;
height: 10px;
}
#indicator_fixed_centered {
position: fixed;
margin: 0 auto;
background: #00f;
width: 10px;
height: 10px;
left:0;
right:0;
}
<div id='indicator_fixed'></div>
<div id='indicator_relative'></div>
<div id='indicator_fixed_centered'></div>
To center fixed/absolute position elements. Add left: 50%; margin-left: (element width/ 2 * -1)px;
#indicator {
position: fixed;
top: 40%;
width: 150px;
margin: 0 auto;
z-index: 1000;
padding: 2px;
background: #fff;
left: 50%;
margin-left: -75px; /* (element width / 2 * -1) */
}
plus make sure that the parent element where you want to center this, has position: relative; so it wont just fly around.
top 40%; horizontal center;
#indicator {
position: fixed;
top: 40%;
left: 50%;
transform: translateX(-50%);
}
<div id="indicator">Hello World</div>
or center screen
#indicator {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="indicator">Hello World</div>
Related
This question already has answers here:
How to connect HTML Divs with Lines? [duplicate]
(7 answers)
Closed 4 years ago.
I am trying to draw lines between divs similar to this:
I have tried using this, as I am new to css I am scratching my head to make divs around a single div. Can someone please help me out with this.
EDIT: I am trying to achieve this using css only so I can use answer of #James Montagne from this but in that case I will need to have separate classes for all 6 divs and 5 lines. I am not sure if it is the best way to achieve this as it might not be responsive? Please suggest.
You can use a static solution like this:
.boxParent{
position: relative;
width: 500px;
height: 500px;
margin: auto;
text-align: center;
}
.boxCenter{
position: absolute;
width: 100px;
height: 100px;
line-height: 100px;
border:1px solid #000000;
border-radius: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #808080;
}
.boxItem {
display: inline-block;
border: 1px solid black;
padding: 1em;
position: absolute;
background: #ffffff;
}
.boxItem[data-boxItem-index]:after{
content: "";
display: block;
position: absolute;
z-index: -1;
height: 1px;
border-top: 1px solid #000000;
}
.boxItem[data-boxItem-index='1']{
top: 40%;
left: 10%;
}
.boxItem[data-boxItem-index='1']:after{
width: 200px;
transform: rotate(5deg);
}
.boxItem[data-boxItem-index='2']{
top: 10%;
left: 60%;
}
.boxItem[data-boxItem-index='2']:after{
width: 200px;
transform: rotate(113deg);
top: 120px;
left: -120px;
}
.boxItem[data-boxItem-index='3']{
top: 80%;
left: 40%;
}
.boxItem[data-boxItem-index='3']:after{
width: 200px;
transform: rotate(96deg);
top: -60px;
left: -70px;
}
<div class="boxParent">
<div class="boxCenter">TEST</div>
<div class="boxItem" data-boxItem-index="1">1</div>
<div class="boxItem" data-boxItem-index="2">2</div>
<div class="boxItem" data-boxItem-index="3">3</div>
</div>
Center element positioned absolute. Satellite elements positioned absolute around center element, Pseudo-elements inside secondary elements act as their lines. You need to play with the rotation/width/positioning for each line.
Making this responsive/dynamic requires a bit more work.
I have a CSS problem with a couple of parts. The first part is that I need an absolute positioned :after element to be visible above a fixed position element. The second part is that I need to be able to have a modal as a child of that fixed element that will cover the whole screen. Here's a simplified version of my app.
HTML
<body>
<div class='header'></div>
<div class='nav'></div>
<div class='content'>
<div class='modal'></div>
</div>
<div class='footer'></div>
</body>
CSS
.header {
position: fixed;
height: 50px;
width: 100%;
}
.nav {
position: fixed;
top: 50px;
height: calc(100vh - 100px);
width: 100px;
z-index: 1;
}
.nav:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 100%;
margin: auto;
height: 0;
border-left: solid 10px black;
border-top: solid 10px transparent;
border-bottom: solid 10px transparent;
}
.content {
position: fixed;
top: 50px;
left: 100px;
height: calc(100vh - 100px);
width: calc(100vw - 100px);
}
.footer {
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
}
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
z-index: 2;
}
A codepen: https://codepen.io/winterblack/pen/ypBOqz
I can either have a z-index: -1 on my content element, or a z-index: 1 on my nav element. Either way, it gets in the way of the modal, which must have the content element a its parent.
The best solution I can think of right now is to use z-index: -1 on the content element, and remove it when the modal is opened. That will have the strange effect of having the absolute element disappear while the modal is opened...not too big of a deal probably, but not ideal. Any other ideas?
If you changed the position of content to relative, would that be an ok compromise for what you're trying?
.content {
position: relative;
top: 50px;
left: 100px;
height: calc(100vh - 100px);
width: calc(100vw - 100px);
background: aquamarine;
}
I have a circular div that represents white circle and the logo. It seems like I wanted it to be.
<div class="whiteCircle">
<div class="image" style="background-image: url('https://www.postnl.nl/Images/marker-groen-PostNL_tcm10-72617.png?version=1');"></div>
</div>
.whiteCircle {
width: 65px;
height: 65px;
background-color: white;
border-radius: 50px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
Then, I created another rectangle div as a sibling to whiteBox, for the other contents.
<div class="box">
<div class="text">
<h2>Heading</h2>
</div>
</div>
The positioning of both parents looks alright however I couldn't figure out a way to move the Heading above the whiteBox. I played with the combinations of z-index but I read it's not possible to adjust children's z-index and parent at the same time.
What am I doing wrong? What is the proper way of achieving it?
https://codepen.io/anon/pen/mwKrdG
1- Remove the z-index from your parent div.
2- Add z-index to your white-box div, i choose the value 20.
3- Absolute positioning your .text class and make sure the z-index of it is bigger than 20;
The css
body {
background-color: lightblue;
}
.whiteBox {
width: 65px;
height: 65px;
background-color: white;
border-radius: 50px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
z-index:20;
}
.image {
text-align: center;
height: 100%;
background: no-repeat center center;
}
.container {
width: 275px;
height: 350px;
background-color: white;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 38px
}
.text {
text-align: center;
z-index: 25;
position: absolute;
left: 35%;
}
https://codepen.io/anon/pen/OgEROK
I have set up a modal for phots, so when i click on a small photo i get a larger photo up in a modal, the modal has position: fixed; and the modal-content has position: absolute; i can center it with margin: auto; left: 0; right: 0;but then the width goes all the way to the right and left, i want the modal content width to be the same as the photo inside it or the content of the modal-content
my code:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 30px;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
margin-bottom: 30px;
margin: auto;
border: 1px solid #888;
}
.modalimg {
position: relative;
text-align: center;
}
.modalimg img{
max-width: 100%;
max-height: 400px;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
its maybe a bit messy now but i have tried alot of different things with no luck..
This is what I use when I center an absolute-positioned element, this works for me all the time:
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
here you are please
.element {
position: absolute;
top: 15px;
z-index: 2;
width: 40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin: 0 auto;
left: 0;
right: 0;
background: red;
color: #fff;
text-align: center;
}
<div class="element">
text..
</div>
.modal-content {
background-color: #fefefe;
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
border: 1px solid #888;
}
to align absolute div to center
left: 0;
right: 0
text-align: center
this will align the div in center.
Here's a possible solution that uses:
absolute positioning on the content container (.modal-content)
doesn't use absolute|fixed on the actual content
The content container (.modal-content) will grow along with its content. Finally, it's moved back to the middle using transform: translate(-50%, -50%);:
.modal {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
border: 2px solid red;
transform: translate(-50%, -50%);
}
<div class="modal">
<div class="modal-content">
<img src="//placehold.it/200x200" alt="">
</div>
</div>
Demo
Try before buy
This is driving me nuts.
The situation is as follows.
I have 1 wrapper div that needs to span the entire width / height of the screen.
I need 1 div that is positioned on the right hand of the screen and has a fixed width (eg. 100px;).
Then the other div needs to span the remaining left half of the screen (no further !).
Note: I don't want to float the elements, I really need the divs to span the entire height of the screen, because a Google Map will be loaded into the div.
I am aware of the calc function in css, but I don't want to use it, because IE8 doesn't support it.
http://jsfiddle.net/gze4vcd2/
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
#wrapper{
position: relative;
width: 100%;
height: 100%;
background: greenyellow;
}
#left{
position: absolute;
left: 0;
width: auto;
background: blue;
}
#right{
position: absolute;
right: 0;
height: 100%;
width: 200px;
background: yellow;
}
This doesn't work at all.
I have tried all sorts of things, but I just can't get it to work.
Have you tried to use position: fixed for your #Wrapper
#wrapper{
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: greenyellow;
}
#left{
background: red;
position: fixed;
left: 0;
top: 0;
height: 100%;
right: 100px;
}
#right{
background: blue;
position: fixed;
width: 100px;
top: 0;
height: 100%;
right: 0px;
bottom: 0px
}
Above is the updated code that works for me