CODEWITHSUNDEEP
htmlcssflexboxvertical-alignment
Benedikt
Benedikt

Reputation: 47

vertical-align property not working in flexbox

I want to display a calculation with exponents (and more). To set the elements in line i use flexbox. Within the flexbox element i want to make use of the vertical-align CSS property. But the vertical-align property doesn't work.

I tested it with different approaches and in the end one solution worked. But then the justify-content property is not working anymore. in my attempt i used for the property: flex the webkit version: -webkit-box.

Here is the snipped in a fiddle if you want to test it: https://jsfiddle.net/oe3hxfma/

.calculation {
  display: flex;
  justify-content: center;
  font-size: 1.3em;
}

.exponent {
  display: inline;
  vertical-align: super;
}

.calculationTwo {
  display: -webkit-box;
  justify-content: center;
  font-size: 1.3em;
}
<div class="calculation">
  3
  <div class="exponent">
    2
  </div>
</div>

<div class="calculationTwo">
  3
  <div class="exponent">
    2
  </div>
</div>

How can i make use of the vertical-align when the parent elmenet is displayed as flexbox.

Upvotes: 3

Views: 3229

Answers (4)

Dupinder Singh
Dupinder Singh

Reputation: 7789

just a suggestion, why don't you try to use sup HTML Tag for exponential?

<div>
3 <sup>2</sup>
</div>

and for vertical alignment, display:flex use align-items like in above answers.

div
{
   display: flex;
    justify-content: center;
}
  <div>
    3 <sup>2</sup>
    </div>

.calculation {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.3em;
}

span {
  vertical-align: super;
}
<div class="calculation">
  3
  <div class="exponent">
    <span>2</span>
  </div>
</div>

Upvotes: 1

tech_amity
tech_amity

Reputation: 202

You should use "align-items" property to align items in vertical position:

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}
stretch: fit in the container,
flex-start: align item vertically upward,
flex-end: align items vertically downward,
center: align items to vertically center,
baseline: items are aligned such as their baselines align

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 372149

The vertical-align property works only with inline-level and table-cell elements (MDN).

Because the exponent element is a child of a flex container, it is automatically blockified (spec). This means it computes to a block-level element and vertical-align is ignored.

It doesn't matter how you define the display value for the flex item (e.g., in your code you have the flex item set to display: inline). In a flex formatting context, the display value of flex items is controlled by the flex algorithm.

The key to using vertical-align is to remove it from a flex formatting context. Create an element that is a child of the flex item. Now the exponent value is outside the scope of flex layout, and you can set it to display: inline.

Also, because the text is aligned to the top of the container, there is no space for vertical-align: super to work. So align the text to the center or bottom of the container.

Add align-items: flex-end or center (depending on how much superscripting you want).

.calculation {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.3em;
}

span {
  vertical-align: super;
}
<div class="calculation">
  3
  <div class="exponent">
    <span>2</span>
  </div>
</div>

Upvotes: 3

Ozzy Gonzalez
Ozzy Gonzalez

Reputation: 25

You could try give the content some padding and use the align-items: stretch feature of flex.

Here is a very useful guide to flex! It's awesome to keep it in your back-pocket as a front end developer!

Flexbox Guide!

Upvotes: 0

Related Questions