> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/learncss/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/learncss/can-chinh-chu/css-single-or-multiple-line-vertical-align-ok.md).

# css single or multiple line vertical align (ok)

https\://stackoverflow\.com/questions/9192389/css-single-or-multiple-line-vertical-align

```
Oke :))
.wraptext {
  display: table;
  >.textmidle2 {
    display: table-cell;
    height: 48px;
    vertical-align: middle;
  }
}
```

```
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.inline {
		  display: inline-block;
		  margin: 1em;
		}
		.wrap {
		  display: table;
		  height:  100px;
		  width:   160px;
		  padding: 10px;
		  border:  thin solid darkgray;
		}
		.wrap p {
		  display:        table-cell;
		  vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="inline">
	  <div class="wrap">
	    <p>Example of single line.</p>
	  </div>
	</div>
	<div class="inline">
	  <div class="wrap">
	    <p>To look best, text should really be centered inside.</p>
	  </div>
	</div>
</body>
</html>
```

```
<div class="inline">
  <div class="wrap">
    <p>Example of single line.</p>
  </div>
</div>

<div class="inline">
  <div class="wrap">
    <p>To look best, text should really be centered inside.</p>
  </div>
</div>
```

```
.inline {
  display: inline-block;
  margin: 1em;
}
.wrap {
  display: table;
  height:  100px;
  width:   160px;
  padding: 10px;
  border:  thin solid darkgray;
}
.wrap p {
  display:        table-cell;
  vertical-align: middle;
}
```
