How to center different content in div?

Question

I have a div with a label next to it, like this:

This is how my html in Vue.js looks like:

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

I have no idea how to center the label next to the checkbox. I have tried a lot of things, but it doesn't seem to be working. Thanks for answers!

score 3 · Accepted Answer · answered Sep 14 '21 at 06:57

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>

score 1 · Answer 2 · answered Sep 14 '21 at 06:58

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>

score 0 · Answer 3 · answered Sep 14 '21 at 06:57

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.

score 0 · Answer 4 · answered Sep 14 '21 at 07:04

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>

score -1 · Answer 5 · answered Sep 14 '21 at 06:56

-1

You can use the center tag

It is very old-fashioned but it works.

answered Sep 14 '21 at 06:56

Goggi

32
8

You should not do this, as `` is deprecated. You can read this here: [: The Centered Text element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) – StevenSiebert Sep 14 '21 at 07:06
1

Okay thanks! I thought this might work – Goggi Sep 14 '21 at 07:13

How to center different content in div?

5 Answers5