[Vuejs]-How to center different content in div?

3👍

✅

Try using flexbox

.center {
  display: flex;
  align-items: center;
}

<div style="margin-bottom: 15px" class="center">
  <input id="newsletterRegister" type="checkbox" name="newsletterRegister" style="width: 30px" />
  <label for="newsletterRegister">
        Do you want to receive email promotions?
      </label>
</div>

👤Charles Lavalard

[Vuejs]-Wait for an Axios call to finish in Quasar / Vue

1👍

just put the display: flex; align-items: center; in the div style, it’ll do the job

  <div style="margin-bottom: 15px; display: flex; align-items: center;">
      <input
        id="newsletterRegister"
        type="checkbox"
        name="newsletterRegister"
        style="width: 30px"
      />
      <label for="newsletterRegister">
        Do you want to receive email promotions?
      </label>
    </div>

👤Vijay Kumawat

[Vuejs]-Wait for an Axios call to finish in Quasar / Vue

0👍

You can use ‘vertical-align’ like this:

<div style="margin-bottom: 15px;">
      <input
        id="newsletterRegister"
        type="checkbox"
        name="newsletterRegister"
        style="width: 30px; vertical-align:bottom;"
      />
      <label for="newsletterRegister">
        Do you want to receive email promotions?
      </label>
    </div>

Or alternatively You could set labels (.newsletterRegister) line-height style to the same as checkbox height is.

👤Flash Thunder

[Vuejs]-Wait for an Axios call to finish in Quasar / Vue

0👍

You can use display: flex; and justify-content:center; to align the items horizontally and align-items: center to align items vertically. Try running the snippet if this works for you.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
   <div style="margin-bottom: 15px; display: flex; justify-content: center; align-items: center;">
    <input
     id="newsletterRegister"
     type="checkbox"
     name="newsletterRegister"
     style="width: 30px"
    />
    <label for="newsletterRegister">
     Do you want to receive email promotions?
    </label>
   </div>
  </body>
</html>

👤Yong