Align element to bottom corner inside a centered flexbox-CodePudding

Bit of a mothful but to illustrate better I have these elements (note the Next link position not being in the corner):

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  
  min-height: 500px;
  width: 100%;
  height: 100%;
  padding: 2rem;
  
  background-image: url(https://lh3.googleusercontent.com/0cDOOJjp8pUGDDFLqHFITEi35uMGZ5wHpZ9KTKridxk71kpR9MfeydpQqG5n8Mvetvkg5iVuZGeL2xMvxgBY_UL-T9p0x_Eo4EAh);
  background-size: 80px 80px;
  background-position: bottom right;
  background-repeat: no-repeat;
}

.container a{
  align-self: flex-end;
}

<div class="container">
  <h1>Welcome</h1>
  <p>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
  Lorem Ipsum<br>
  Lorem Ipsum
  <a href="/" class="button">Next</a>
</div>

And I want to order them in such way:

---------------------
|                   |
|                   |
|                   |
|                   |
|                   |
|                   |
|      Welcome      |
|    Lorem Ipsum    |
|    Lorem Ipsum    |
|                   |
|                   |
|                   |
|                   |
|              Next | 
|                   | 
---------------------

Such that the "Next" element is on the corner, just as close to the image, but keeping a margin. Any hacky solution is welcome, but I highly prefer a solution that is relative for any display, that's why I'm not relying on absolute positioning.

CodePudding user response：

how like this

<style>
        .container {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            
            min-height: 500px;
            width: 100%;
            height: 100%;
            padding: 2rem;
            
            background-image: url(https://lh3.googleusercontent.com/0cDOOJjp8pUGDDFLqHFITEi35uMGZ5wHpZ9KTKridxk71kpR9MfeydpQqG5n8Mvetvkg5iVuZGeL2xMvxgBY_UL-T9p0x_Eo4EAh);
            background-size: 80px 80px;
            background-position: bottom right;
            background-repeat: no-repeat;
         }

         .container-title{
             text-align: center;
         }

        .container-link{
            text-align: right;
        }
    </style>


<body>
    <div class="container">
        <div class="container-title">
            <h1>Welcome</h1>
            <p>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
            Lorem Ipsum<br>
            Lorem Ipsum
        </div>
        <div class="container-link">
            <a href="/" class="button">Next</a>
        </div>
      </div>
</body>

CodePudding user response：

If all you need is to position the Next button to the bottom of your container, simply add margin-top: auto; to .container a in your CSS. This will ensure the button always stays to the bottom of the container.

However, if you need to also make the content in the container be vertically centered, please try the below snippet.

body{
  font-family: -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    Oxygen-Sans, 
    Ubuntu, 
    Cantarell, 
    "Helvetica Neue", 
    sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 500px;
  max-width: 100%;
  margin: 50px auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
  border-radius: 20px;
}
        
.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
  width: auto;
  padding: 2rem;
  text-align: center;
}
        
.section__header {
  text-align: center;
}

.description{
  line-height: 1.5;
  font-weight: 300;
}

.footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 2rem 2rem 2rem;  
}

    <section class="container">
      <div class="item">
        <h1 class="title">Welcome!</h1>
            <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>           
      </div>
      <div class="footer">
        <a href="#">Next</a>
      </div>
  </section>

CodePudding user response：

You can use margin-top but you have to use it on both the link and the body text so put the text in it's own div and you're sorted.

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 500px;
  width: 100%;
  height: 100%;
  padding: 2rem;
  background-image: url(https://lh3.googleusercontent.com/0cDOOJjp8pUGDDFLqHFITEi35uMGZ5wHpZ9KTKridxk71kpR9MfeydpQqG5n8Mvetvkg5iVuZGeL2xMvxgBY_UL-T9p0x_Eo4EAh);
  background-size: 80px 80px;
  background-position: bottom right;
  background-repeat: no-repeat;
}

.container div {
  margin-top: auto;
}

.link {
  align-self: flex-end;
}

<div class="container">
  <div>
    <h1>Welcome</h1>
    <p>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
    Lorem Ipsum<br> Lorem Ipsum
  </div>
  <div class="link"><a href="/" class="button">Next</a></div>
</div>