Vertically center text and checkbox that are floated

HTML & CSS
1

Hi all

I have a jsfiddle here - https://jsfiddle.net/17d4n2mg/5/

It’s simply a div containing text that is floated left and a checkbox float right.

Is it possible to vertically center both in the div without absolutly positioning them both.

Also on a side note the div containing the checkbox seems to have added height on the bottom.

It’s not margin or padding, does anyone know what that is.

1 Like
2

Here you can find different solutions on centering the content vertically: http://stackoverflow.com/questions/10968726/how-to-verticaly-align-into-the-center-of-the-content-of-a-div-with-defined-widt

3

Hi,

If you want automatic alignment then you can’t use floats as they are removed from the flow. I would use display table and table-cell approach for automatic alignment.

The gap under the checkbox is that the inline-block element by default resides on the baseline and thus leaves a gap underneath for descenders. Change the alignment to middle or set the element to block and give it a width and height instead of padding.

Note that the “for” attribute on the label must match the checkbox or you won’t get it to be checked.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
html {
	font-family: sans-serif;
}
.wrap {
	border: 1px solid red;
	width: 500px;
	overflow: auto;
	display:table;
	border-collapse:collapse;
}
p {
	margin: 0;
}
.btn {
	text-align:right;
}
.checkbox {
	display: none;
}
.tc{display:table-cell;vertical-align:middle;padding: 15px;}
.checkbox + label {
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
	border-radius: 3px;
	display:inline-block;
	position: relative;
	vertical-align:middle;
	padding:15px;
}
</style>
</head>

<body>
<div class="wrap">
  <p class="tc">Label Name</p>
  <div class="btn tc">
    <input type="checkbox" id="checkbox-1" class="checkbox" />
    <label for="checkbox-1"></label>
  </div>
</div>
</body>
</html>
1 Like
4

I realised display table was the way to go but now i have another issue.

I have another jsfiddle here - https://jsfiddle.net/gqjgk0sL/1/

I have three elements that are vertically centered in the top example the left and right elements have widths larger than there content.

In the bottom example with more text it pushes the outer elements to the width to be the size of the content.

How do I make the elements widths the size of there contents. So when there is less text it won’t be floating in the middle

1 Like
5

Remove this width?

.partner-logo-block {
    width: 500px;

(not sure what you want to do)

6

If I understand you right, you can minimise the width of the logo and check cells by setting their widths to 1px.
That will close them up to their contents and maximise the size of the middle cell.

7

I have updated my jsfiddle - https://jsfiddle.net/gqjgk0sL/6/

The layout use bootstrap and I need the blocks to 100% the with of the column they are in.

I need the table cells in the blocks to be the width of there content - like the image attached.

8

@SamA74’s solution should do the trick!

You might need to change the .partner-logo-block width to 100% rather thn 500px.

1 Like
9

Yes as mentioned above just add this:

.partner-logo-block__logo,
.partner-logo-block__check-btn{width:1px}
2 Likes
10

Thanks, all working now

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.