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

How do I center an element on the same level as one positioned on the right in HTML?

I know questions similar have been discussed frequently but I can’t find an answer to my current issue:

.above-content {
  width: 100%;
  height: 200px;
  background-color: teal;
  text-align: center;
}

.below-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator {
  background-color: lightpink;
  height: 20px;
  width: 150px;
}
<div class="above-content">Text in the middle</div>
<div class="below-content">
  <div class="indicator"></div>
  <button>Button that should be right aligned</button>
</div>

I have a div that includes an indicator and a button, the button should be positioned to the right and the indicator to the center.

I can use flex: 1 on the indicator but this then causes the indicator to grow to take up the full available space: I need a solution that means that the indicator is exactly center at all times, regardless of whether or not the button exists.

I do not want the indicator to only be center of the available space (remaining from the button width).

Tags:

2

Answers


  1. 0

    You can use flex-direction then
    see you have below content
    you can add
    flex-direction:column;
    to the class of below content then
    the indicator and button with be shown in line and in the center of below-content .

    but i think you wana button at the right side so you have to create a container outside the button link. this

    <div class="cont"><button>You right button</button></div>

    and style cont as

    width:100%;
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;

    Login or Signup to reply.
  2. 0

    You can add a wrapper around your button, then use a pseudo-element to fill in the left column:

    <div class="above-content">Text in the middle</div>
<div class="below-content">
  <div class="indicator"></div>
  <div class="button-wrapper">
    <button>Button that should be right aligned</button>
  </div>
</div>

    .below-content::before {
  content: '';
  flex: 1;
}

.button-wrapper {
  display: flex;
  flex: 1;
  justify-content: end;
}

    Try it:

    .below-content::before {
  content: '';
  flex: 1;
}

.button-wrapper {
  display: flex;
  flex: 1;
  justify-content: end;
}

/* Original styles */

.above-content {
  width: 100%;
  height: 200px;
  background-color: teal;
  text-align: center;
}

.below-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.indicator {
  background-color: lightpink;
  height: 20px;
  width: 150px;
}
    <div class="above-content">Text in the middle</div>
<div class="below-content">
  <div class="indicator"></div>
  <div class="button-wrapper">
    <button>Button that should be right aligned</button>
  </div>
</div>

    Or you can use grid and let it takes care of the rest:

    .below-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.indicator {
  grid-column: 2;
}

button {
  justify-self: end;
}

    Try it:

    .below-content {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.indicator {
  grid-column: 2;
}

button {
  justify-self: end;
}

/* Original styles */

.above-content {
  width: 100%;
  height: 200px;
  background-color: teal;
  text-align: center;
}

.below-content {
  align-items: center;
  justify-content: center;
}

.indicator {
  background-color: lightpink;
  height: 20px;
  width: 150px;
}
    <div class="above-content">Text in the middle</div>
<div class="below-content">
  <div class="indicator"></div>
  <button>Button that should be right aligned</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search