0

I'm using Vuetify as our primary framework and added some of Bootstrap-Vue components like b-form-checkbox&radio.

I'm trying to figure it out how to vertical center my bootstrap-vue checkbox and text. so far, I've tried::

  1. vertical-align="baseline"
  2. align="center"
  3. justify="center" // I know it's for horizontal but... I've tried anyway
  4. class="align-middle"

My framework structure is

    <v-container>
      <v-card>
        <v-card-text>
          <v-row>
            <v-col>
              <b-form-checkbox>
                ABCD
              </b-form-checkbox>
   ....
    </v-container>

I've tried adding them into v-col, v-row and b-form-checkbox, and wrapped checkbox with span and added into span too but none of them worked.

Please help!

Chawchawchaw
  • 203
  • 1
  • 4
  • 13
  • is "ABCD" the element you want to vertically center? – DRich Dec 06 '19 at 01:02
  • checkbox and "ABCD". checkbox itself is somehow align="bottom" and abcd is somehow align="top" which is very weird cuz I didn't set any align at all... they are default – Chawchawchaw Dec 06 '19 at 01:42
  • Right, so I would add a `
    ` to surround the `` and use that `div` as the container. Then set the style on the `` according to the content as I described in my answer.
     – DRich Dec 06 '19 at 01:44
  • Could you maybe include a screen shot of your current result? – Troy Morehouse Dec 06 '19 at 14:26

1 Answers1

1

I think this is what you're looking for:

https://codesandbox.io/s/quizzical-roentgen-hb2i5?fontsize=14&hidenavigation=1&theme=dark

The trick is that you have to set the position to relative on whatever element contains the components you want to center vertically. Then on the components you center vertically, you essentially say, "Put the top of this component half-way down its parent, then move it up by half of its height"

You can see that in the vertCenterContentContainer class and the vertCenteredContent class in the vue component style.

The salient portions are:

.vertCenterContentContainer{
  ...
  position: relative;
}

.vertCenteredContent{
  position:relative;
  top: 50%;
  transform: translateY(-50%);
  ...
}

Hope this helps!

DRich
  • 972
  • 1
  • 8
  • 25
  • well... it doesn't work.. it change the position not align... I've tried exactly what you wrote here, but align is still the same... but Thanks for the help! – Chawchawchaw Dec 06 '19 at 04:18
  • Are you sure all containers are 100% the height of their parents? – DRich Dec 06 '19 at 14:45
  • Yes! So sorry for late reply. I've checked Bootstrap forum and fount out it's ongoing issue to Bootstrap V4. They will fix it next year(2020) with version 5. https://github.com/bootstrap-vue/bootstrap-vue/issues/3745 – Chawchawchaw Dec 13 '19 at 00:40