CODEWITHSUNDEEP
css
Miguel Moura
Miguel Moura

Reputation: 39474

Center element inside div and over other content

I have the following code (with example):

<div>
  <ul class="data">
    <li>
      <img src="http://placehold.it/800x200">
    </li>
    <li style="display: none;">
      <img src="http://placehold.it/800x200">
    </li>
  </ul>
  <ul class="pipe">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</div>

I need to place the pipe list on bottom and center but over the image.

The data UL will have images which will be slides.

I tried the following but I am not able to make it work:

div {
  border: 1px solid red;
  position: relative;
  text-align: center;  
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.pipe {   
  bottom: 0;  
  margin: 0 auto;
  padding: 0;  
  z-index: 10000;
}

li {
  display: inline-block;
}

a {
  border: 3px solid black;
  border-radius: 16px;
  display: block;
  height: 16px;
  width: 16px;   
}

What am I doing wrong?

Thank You, Miguel

Upvotes: 0

Views: 41

Answers (2)

AlexPrinceton
AlexPrinceton

Reputation: 1203

Here you go http://codepen.io/anon/pen/GJwag . You were need add this rules

ul.pipe {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;

}

Upvotes: 1

j08691
j08691

Reputation: 207943

Remove the position:absolute from your ul rules.

jsFiddle example

Or, keep the position and set the ul to have a width of 100%.

Upvotes: 0

Related Questions