CODEWITHSUNDEEP
htmlcssflexbox
mohammad rostami siahgeli
mohammad rostami siahgeli

Reputation: 7237

How to make inline elements APPEAR inline inside of a flexbox

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container span {
  border-bottom: 1px solid red;
}
<div class="container">
  <span>title</span>
  <div class="content">
  </div>
</div>

I want title to appear in the middle of the screen, as old inline element. But inside a flex container, it's expanded like block-level elements.

What am I missing here?

Demo: https://jsfiddle.net/rk5h5ph7/

Upvotes: 0

Views: 56

Answers (2)

user9730119
user9730119

Reputation:

I don’t fully understand what you want, but try one of what I’ve suggested.

Try to add this to .container span:

text-align: center;

or add this to .container:

align-items: center;

Upvotes: 3

Gerard
Gerard

Reputation: 15796

Replace justify-content with align-itmes

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container span {
  border-bottom: 1px solid red;
}
<div class="container">
  <span>title</span>
  <div class="content">
  </div>
</div>

Upvotes: 1

Related Questions