Vertical-align:middle

HTML & CSS
1 
<!DOCTYPE html>
<html>
<title>title</title>
<head>
<style>
#container{
display:flex;
text-align:center;
background:yellow;
border-style:solid;
vertical-align:middle;
}
#left{
width:30%;
background:cyan;
vertical-align:middle;
}

#center{
width:40%;
vertical-align:middle;
}

#right{
width:30%;
background:cyan;
vertical-align:middle;
}
</style>
</head>

<body>
<div id="container">
<div id="left">
<p>1st line</p>
<p>2nd line</p>
</div>
<div id="center">
<div  style="vertical-align:middle">
center
</div>
</div>
<div id="right">
<p>1st line</p>
<p>2nd line</p>
</div>
</div>
</body>
</html>

I have the code above at http://form.kr/dest/t11.php

Since I like put the word “center” which is inside the yellow box vertically-middle, I tried “vertical-align:middle” many times in the code.
However, the word “center” is not vertically middle.

How can I put the word “center” vertically middle?

2

align-items:center on #container will do what you want.

e.g.

<!DOCTYPE html>
<html>
<title>title</title>
<head>
<style>
#container {
	display:flex;
	text-align:center;
	background:yellow;
	border-style:solid;
	align-items:center;
}
#left {
	width:30%;
	background:cyan;
}
#center {
	width:40%;
}
#right {
	width:30%;
	background:cyan;
}
</style>
</head>

<body>
<div id="container">
  <div id="left">
    <p>1st line</p>
    <p>2nd line</p>
  </div>
  <div id="center">
    <div> center </div>
  </div>
  <div id="right">
    <p>1st line</p>
    <p>2nd line</p>
  </div>
</div>
</body>
</html>

The vertical-align property only applies to inline, inline-block or table-cell elements. It doesn’t apply to block elements of flex boxes etc.

Flexbox has a set of its own properties for aligning stuff vertically and horizontally.

2 Likes
3

The text “center” is not vertically middle at http://form.kr/dest/t12.php of your code.
Is impossible to make it vertically middle by modifying your the code above?

How can I use the flex properties for aligning stuff vertically?

4

Hi,
The code @PaulOB posted above does align the items vertically.

But the code you link to does not use the flexbox properly. Please try add the align-items:center; to the container ruleblock and see what happens.

Edit)
None of the vertical-align:middle; you have in your css and html is in use when you have the display property set to flex.

As in your linked code:


#container{
  display:flex;
  text-align:center;
  background:yellow;
  border-style:solid;
  vertical-align:middle;
  align-items:center; /* add this to make flexbox work for its children */
}
5

Thank you, it works.

1 Like
6

A little off topic here, but in your recent thread you were using the vertical-align in a proper inline context: Vertical align: top in div.

@PaulOB gave you a solution and a good link to vertical alignment. (https://christopheraue.net/design/vertical-align)

The inline text formatting model where vertical-align is effective, it is very useful to have a little deeper knowledge, and in case you want to get a grip on the matter I would like to give a link to Eric Meyer’s thorough explanation: https://meyerweb.com/eric/css/inline-format.html

1 Like
7

Erik has answered your questions in full but I’m just wondering what it was that you didn’t understand when I said this to you:

:slight_smile:

1 Like
8

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