css Question posted in
Some basic documentation can be found here.

Css – Element attaching to the bottom of container

I’m trying to center a dot inside a div. When I try margin-bottom: 50%;, it pushes the other stuff around. I’ve also tried setting justify-content and align-items to center.

.slider{
    width: 20px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;a
    position: relative;

    border: 2px solid black;
    border-radius: 20px;
}
.line{
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.selector{
    width: 0px;
    height: 0px;
    border: 2px solid black;
}
<div class="slider">
    <div class="line">
        <div class="selector"></div>
    </div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
</div>
Tags:

2

Answers


  1. 0

    You can eliminate the .line divs entirely, div element should be for content, not styling.

    Just use a repeating-linear-gradient to create the lines and then center as usual.

    Here I have added red lines at the horizontal and vertical centers to show the centered element.

    * {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.slider {
  margin: 1em;
  width: 20px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background: linear-gradient(black 0.1em, transparent 0.1em);
  background-size: 100% 20px;
  /* 100px / 5 */
  background-position: 0 -2px;
  /* adjust for border size */
  border: 2px solid black;
  border-radius: 20px;
  position: relative;
}

.selector {
  width: 4px;
  height: 4px;
  background: black;
}


/* demo only */

.slider:before {
  /* horizontal line */
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background: red;
  left: 0%;
  top: 50%;
  translate: 0 -50%;
}

.slider:after {
  /* vertical line */
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  background: red;
  left: 50%;
  top: 0;
  translate: -50%
}
    <div class="slider">

  <div class="selector"></div>

</div>
    Login or Signup to reply.
  2. 0

    You can set the height to 100% for line and margin: auto for the dot:

    .line{
    border-bottom: 2px solid black;
    display: flex;
    height: 100%;
}
.selector{
    border: 2px solid black;
    margin: auto;
}

    .slider{
    width: 20px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;a
    position: relative;

    border: 2px solid black;
    border-radius: 20px;
}
.line{
    border-bottom: 2px solid black;
    display: flex;
    height: 100%;
}
.selector{
    border: 2px solid black;
    margin: auto;
}
    <div class="slider">
    <div class="line">
        <div class="selector"></div>
    </div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search