Geek Answers Handbook

How to center a position: an absolute element in a flexible layout

I have a slider that includes navigation points located in absolute value. And I want to know how to center these points along the X axis.

Im fine if it is installed correctly: 10%; on the desktop. But mobile has aesthetic problems, when the values ​​are in%, it just never looks right in the center due to the small width.

I searched a lot and the most popular solution was

left: 50%;
right: 50% transform: translateX(50%);

But still it works the same as the left. Please take a look at the jsfiddle code below, I need the space between the 2nd and 3rd white point, which should be cut by a white vertical line.

https://jsfiddle.net/dpmango/vk9oc6gt/2/

Thanks for helping in advance!

+4
2

https://jsfiddle.net/vk9oc6gt/3/

transform:translateX(-50%); - , .

, transform:translateX(-50%);, , , X, 50%, , .

div, :

.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%);
}

, https://jsfiddle.net/vk9oc6gt/4/, :

top:50%;
left:50%;
transform:translate(-50%, -50%);
+5

? - .owl-dots{width: 100%, text-align:center; left:0;}

-1

More articles:


All Articles