Question 229855 in Html Question posted in
Some basic documentation can be found here.

Html – How to put timeline box in the middle?

I have a time line codes here

<div class="bungkus center">
<div class="timeline">
<div class="checkpointt">End
</div>

the CSS :

.checkpointt {
    max-width: 14em;
    position: relative;
    text-align: center;
    border-radius: 6px;
    border: 0.5px solid #888;
    padding: 5px;
    z-index: 1;
    left: 50px;
}

And I wish I can move the start and end button box aligned center to the line

as follow

I cant find where I miss 🙁
Please advise

Tags:

2

Answers


  1. 0

    Just do 2 things below

    .checkpointt {
max-width: 14em;
position: relative;
text-align: center;
border-radius: 6px;
border: 0.5px solid #888;
padding: 5px;
z-index: 1;
left: 50px; // this should be 0, or remove it
margin: auto; // Add this one

    }

    Login or Signup to reply.
  2. 0

    Try add "margin: 0 auto;" to the .checkpointt, I think the left and right margins are set to "auto" 🙂
    Also, the problem might be the parent container, make sure the parent div has a width set to 100%, also the position: relative; property in your .checkpointt CSS class might be affecting the centered alignment.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search