How to align vertically an item

Question

I'm sorry for the dummy question, but coming from the WPF world, I'm having an hard time to align stuff in HTML/CSS.

I'm building a small app with Vue to train a bit myself on this, but it makes litteraly more than one hour than I'm struggling.

I'm building a header, which should have a left and right part.

Currently I've the following:

<template>
  <div class="layout-topbar">
    <div class="layout-topbar-left">
      <a href="/" class="logo">App name</a>
    </div>
    <div class="layout-topbar-right"></div>
  </div>
</template>

<style lang="scss" scoped>
a.logo {
  text-decoration: none;
  color: inherit;
}
.layout-topbar {
  height: 4rem;
}
.layout-topbar-left {
  margin: auto 0;
  height: auto;
}
</style>

And I cannot figure out why the second div(the one with layout-topbar-left class is sticking to the top even with the margin: auto 0;?

(the current structure may not make much sense, but I will have additional elements inside the a and inside the layout-topbar-left)

`div` is a block element so it takes full width that it can. If you want to align them see CSS `flex` or `grid`. `.layout-topbar { display: flex; align-items: center; justify-content: space-between; }` — Vucko, Jul 02 '21 at 08:58
_“sticking to the top even with the `margin: auto 0;`”_ - did you expect this to center the element in regard to the parent height? That does not work in that direction, auto margins to center an element only work in the horizontal, not the vertical. (In normal context, in flexbox/grid things are a bit different.) — CBroe, Jul 02 '21 at 09:00

score -1 · Answer 1 · answered Jul 02 '21 at 09:04

-1

To align items vertically you can use:

display: flex;
flex-direction: column; //align items vertically
align-items: center; //centers your items vertically

answered Jul 02 '21 at 09:04

Yong

1,622
1
4
29

score -1 · Answer 2 · answered Jul 02 '21 at 09:07

You can use display: flex and align-items for this. For example:

a.logo {
  text-decoration: none;
  color: inherit;
}
.layout-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

  <div class="layout-topbar">
    <div class="layout-topbar-left">
      <a href="/" class="logo">App name</a>
    </div>
    <div class="layout-topbar-right">Right Content</div>
  </div>

How to align vertically an item

2 Answers2