I have an slider, which include navigation dots positioned by absolute value. And I want to know how to center those dots by X axis.
Im fine when it's set right: 10%; at the desktop layout.
But mobile have an esthetic issues when the values in %, it just never looks right in the center because of small width.
I have searched a lot, and most popular solution was
left: 50%;
right: 50% transform: translateX(50%);
But still it works just as left.. Please have an look on jsfiddle code below, I need space between 2nd and 3rd white dot to be cut by white vertical line.
https://jsfiddle.net/dpmango/vk9oc6gt/2/
Thank you for helping in advance!
https://jsfiddle.net/vk9oc6gt/3/
transform:translateX(-50%); is what you're looking for.
Notice when you apply transform:translateX(-50%); it shifts the element by a percentage of the element's dimensions, in this case the width because it's an X axis translate, 50% because we specified it and to the left because it's a negative value.
I added it in both the middle dots div and the middle white line:
.center-line {
position: absolute;
background-color: white;
top: 0;
left: 50%;
transform:translateX(-50%);
width: 2px;
height: 100%;
}
.owl-dots {
display: inline-block;
position: absolute;
top: 80px;
left:50%;
transform:translateX(-50%);
}
If you need vertically centered dots too, you can go with this https://jsfiddle.net/vk9oc6gt/4/ using:
top:50%;
left:50%;
transform:translate(-50%, -50%);
why dont u use this? - .owl-dots{width: 100%, text-align:center; left:0;}
Related
I have a Image that i made which acts as a place holder for some of the elements in my website and i want the elements to be placed exactly there. Like here
Like in this image how do i place a div of textbox and a button on the board side of the clock exactly there using css and html.
Your can use the position: absolute in your css and with the help of the top, right, left and bottom you can set the perfect position for it
for eg
{
position: absolute;
top: 50px;
left: 0;
}
use this to get the div in center
{
position: absolute;
top: 50%;
left: 50%;
transfrom : translate(-50%,-50%);
}
Use this for more referance
I'm centering a DIV using translate
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
It does puts it in the middle, however with too much margin to each side. Meaning, that although it is in the middle, never does it go to the edges of the browser window, when the window is resized.
div {
text-align: center;
font-size: 80pt;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
border: 1px solid grey;
}
<div>Look at me, I'm centered, with too much margin.</div>
http://codepen.io/anon/pen/LbQxLV
This is how text wrapping works. When you put the div to left 50% of the page, max width it can obtain is from that starting point at 50% left of screen to right edge of the page, i.e. 50% only. Which is you view is getting.
Thus when using translate for centering a div, you must specify the width if you want to fill it the parent.
So ,just specify the width for your element!
add this code:
div{
width: 100%;
max-width: 90%;
}
change as per your need!
I am trying to center items (vertically and horizontally) within a div. I have looked around here and other places and can't seem to get anything to work. What I am looking for is to have each item centered both vertically and horizontally in its respective div. Notice that there are two navigation tiles on the left and 4 on the right (1 div per tile). The divs also have parent divs which I used to build the sticky footer. The challenge is that it needs to be responsive so I cannot used fixed pixels.
.absolute-center {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
The above is what I tried to get the content centered. Its not working unfortunately.
Here's the fiddle: https://jsfiddle.net/jmc3t164/
Any help is greatly appreciated!
You have this structure (shortened for brevity)
<div class='top-half'>
<p class='absolute-center'>Time left to order</p>
</div>
<div class='bottom-half'>
<p class='absolute-center'>Add Produce</p>
</div>
Centering both vertically and horizontally is often acheieved by
.absolute-center {
position: absolute; /* note */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
BUT this requires that the parent element (in which the child will be centered) has position:relative.
So, you need to add that
.top-half {
width: 100%;
height: 50%;
position: relative;
}
.bottom-half {
width: 100%;
height: 50%;
position:relative;
}
JSFiddle Demo
<div id="blahblah" style="width:90%;margin:auto 5%"> content </div><br> blahblah can be any id you want, or not necessary.<br> You definitely need a width of something, ideally less than 100%; and divide the remainder from 100 by 2 and set it as margin. ( margin: auto is for up and down margings, the 5%, or whatever is for left / right.
Another way is to have a class .center{text-align:center} and assign it to your Div.
Finally, yet another is to insert a div under your position relevant div and style it with 'text-align:center.
thiv.net/mobile needs to work on mobile, and it does, however when I turn my ipod to vertical, it changes drastically, my problem is i need the whole lot, textbox, button and image to be centered vertically, or change on rotate. I think centering the div vertically is the best option, so what css would i use?
Currently i have tried:
.center
{
position:absolute
top:40%;
bottom:40%;
height:20%;
}
But that doesn't work, so maybe it should only be centered after rotating?
Any ideas?
Try following CSS :
.center {
width: 100px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
you can also follow the link of stack-overflow : Best way to center a <div> on a page vertically and horizontally?
If you know the height:
div.centered{
height: 100px;
top: 50%;
margin-top: -50px;
}
Optional: position: absolute | relative | fixed depending on what you want to achieve
the margin-top should always be 0 - half of the height of your div to center.
Okay i'm trying to center some content, but, I want to keep the absolute attribute to keep the content within a certain height on the page, but at the same time, i want the content perfectly centered. How do I center it if absolute takes specific coordinates? Everyone has different sized monitors so giving the coordinates to center it will fail.
#logo {
position: absolute;
top: 25px;
left: 0px;
}
#logo {
position: absolute;
top: 25px;
width: 100px;
left: 50%;
margin-left:-50px;
}
Make the left position 50% and then give it a negative margin to pull it back by half the width.
Demo