Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center one flex item and bottom-align another [duplicate]

Tags:

html

css

flexbox

I'm trying to get one flex item to be centered vertically and horizontally.

I'd like for some text to be fixed to the bottom of the flex container.

margin-top:auto on the text just shoves the inner box to the top. Ideas?

.container {
  background: lightblue;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
.container .box {
  background: goldenrod;
  height: 30px;
  width: 30px;
}
<div class="container">
  <div class="box"></div>
  <span>Text</span>
</div>

Here's the codepen.

like image 848
lowbelly Avatar asked Dec 15 '22 03:12

lowbelly


1 Answers

Try the below instead:

.box  {
    background:goldenrod;
    height: 30px;
    width: 30px;
    margin: auto;
  }
like image 168
user6801750 Avatar answered Feb 02 '23 00:02

user6801750