Intellipaat Back

Explore Courses Blog Tutorials Interview Questions

How to center a “position: absolute” element

0 votes
2 views
in Web Technology by (20.3k points)

I'm having a problem centering an element that has the attribute position set to absolute. Does anyone know why the images are not centered?

body {

  text-align: center;

}

#slideshowWrapper {

  margin-top: 50px;

  text-align: center;

}

ul#slideshow {

  list-style: none;

  position: relative;

  margin: auto;

}

ul#slideshow li {

  position: absolute;

}

ul#slideshow li img {

  border: 1px solid #ccc;

  padding: 4px;

  height: 450px;

}

<body>

  <div id="slideshowWrapper">

    <ul id="slideshow">

      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>

      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>

    </ul>

  </div>

</body>

1 Answer

0 votes
by (40.7k points)

Try using the code given below:

position: absolute;

margin-left: auto;

margin-right: auto;

left: 0;

right: 0;

Related questions

0 votes
1 answer
How to horizontally center a <div>?
asked Aug 1, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer
Position absolute but relative to parent
asked Aug 30, 2019 in Web Technology by Soni Kumari (40.7k points)
0 votes
1 answer
Retrieve the position (X,Y) of an HTML element
asked Aug 3, 2019 in Web Technology by Tech4ever (20.3k points)

Browse Categories

© COPYRIGHT 2011-2024 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...