Why is my text not vertically centering in a flexbox?

HTML & CSS
#1

I am a new coder and am currently trying to figure out grid and flexbox syntax.

I have an issue where text in a flex box is not vertically centering. Here is the codepen example of it:

What am I doing wrong? Why are the words “Advanced Search” not centered? Do I have to nest another flex box inside just to vertically center it, or is there a better way?

#2

Hi,
What tripped you up was when you set height:100%; on .row2-item-boxAdvancedSearch

If you were to remove the height:100% you would see the text vertically align from the align-items: center; rule on the wrapping div .row2-visible
It is the flex items that are being centered by the parent, not the flex items children.

But it looks like you did that so the background color fills the parent’s height.

You don’t need to nest another flex box. But if you were to set the anchor to display:flex and align-items: center; it would work.

However a much simpler way would be to remove the div that the anchor is nested in. Then apply those styles to the anchor itself.

Screenshot


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.row2-visible {
	background: #252a63;
	height: 30px;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.row2-visible form {
	margin: 3px 0;
	padding: 0 5px;
}
.row2-visible input[type=text] {
	width: 200px;
	border-radius: 4px;
	padding-left: 2px;
}
.row2-visible a {
	margin-left: 15px;
	height: 100%;
	display: flex;
	align-items: center;
	color: white;
	font-weight: 500;
	text-decoration: none;
	padding: 0 5px;
	background: black;
}
.row2-visible a:hover {
	color: gold;
	background-color: #383D77;
}
</style>

</head>
<body>

<div class="row2-visible">
	<form>
		<input type="text" placeholder="Search" id="search-name">
	</form>
	<a href="#">Advanced Search</a>
</div>

</body>
</html>
1 Like
#3

I would prefer t avoid the height:100% as that is generally a hacky way to make flexbox stretch to equal height as flexbox items will do that normally in the right format.

I would use margin:auto on the input to center the input vertically and then you can lose the height and the align on the parent.

e.g.

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.row2-visible {
	background: #252a63;
	height: 31px;/* input is 21px tall in chrome and so will be a pixel out at 30px tall*/
	padding: 0;
	display: flex;
	flex-direction: row;
	/*align-items: center;*/
}
.row2-visible form {
	margin: auto 0;/* was 	margin: 3px 0;*/
	padding: 0 5px;
}
.row2-visible input[type=text] {
	width: 200px;
	border-radius: 4px;
	padding-left: 2px;
}
.row2-visible a {
	margin-left: 15px;
	/*height: 100%;*/
	display: flex;
	align-items: center;
	color: white;
	font-weight: 500;
	text-decoration: none;
	padding: 0 5px;
	background: black;
}
.row2-visible a:hover {
	color: gold;
	background-color: #383D77;
}

I’m not keen on the 30px main bar height either (or 31px as in my example) because inputs will be different heights in different browsers and it would be hard to perfectly centre them if they are a pixel out. I would have left out the height and given the form a top and bottom margin to create space and then the input would be vertically centred no matter what size it is. :slight_smile:

3 Likes