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

Html – place first element next to centered element

I have this simple layout:

.container {
  display: flex;
  background-color: gray;
  color: white;
  align-items: center;
  justify-content: center;
}

.el1 {
  background-color: red;
}

.el2 {
  background-color: blue;
}
<div class="container">
  <span class="el1">element 1</span>
  <span class="el2">element 2</span>
</div>

I want, that element2 is centered in the container first, and element1 is always next to it, regardless the size of element2 (element2 can have different sizes).

I tried with position: absolute and auto margin on element2 and moving element1 left, but in this way, if element2 grows, I have to adjust also element1.

What is the proper way of doing this?

Tags:

3

Answers


  1. 0

    You just need to reverse the order of the flex, you can use flex-direction:row-reverse in your case

    .container {
  display: flex;
  flex-direction: row-reverse;
  background-color: gray;
  color: white;
  align-items: center;
  justify-content: center;
}

.el1 {
  background-color: red;
}

.el2 {
  background-color: blue;
}
    <div class="container">
  <span class="el1">element 1</span>
  <span class="el2">element 2</span>
</div>
    Login or Signup to reply.
  2. 0

    I don’t how you prefer the "element 1" to be, but I’m assuming its width would be not as flexible as the "element 2". Have a look on code below, especially on the comment for the .el1 width.

    <html>
  <style>
    .container {
      align-items: center;
      background-color: gray;
      color: white;
      display: flex;
      justify-content: center;
      position: relative;
    }
    .el1 {
      background-color: red;
      position: absolute;
      right: 100%;
      width: 100%; /* The value of 100% in here means it's going to match the "element 2" width. So adjust this value accordingly. */
    }
    .el2 {
      background-color: blue;
    }
    .wrapper {
      position: relative;
    }
  </style>
  <body>
    <div class="container">
      <div class="wrapper">
        <span class="el1">element 1</span>
        <span class="el2">element 2</span>
      </div>
    </div>
  </body>
</html>
    Login or Signup to reply.
  3. 0

    This is maybe not the best way to achieve what you want, but it’s one possible way:

    .container {
  display: flex;
  background-color: gray;
  color: white;
  align-items: center;
  justify-content: center;
}

.container > .el1 {
  width: 90px;
  text-align: center;
}

.el1 {
  background-color: red;
}

.el2 {
  background-color: blue;
}
    <div class="container">
  <span class="el1">element 1</span>
  <span class="el2">element 2</span>
  <span class="el1" />
</div>

    I added another, empty span which gets the same width as the left span in px for example, so the span in the middle will be centered horizontally. Of course you would have to adjust the width dependent of the content of the left span.
    I’m sure, there are better solutions to this, but it may be helpful nevertheless.

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

Back To Top
Search