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>
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>
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.
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
Source:stackexchange.com