How to make text vertically aligned in CSS?

Want to vertically align the text via CSS? We can do this with the help of CSS. By using display: flex; property we can do this easily.

1 min read
How to make text vertically aligned in CSS?
Vertically aligned text in CSS

CSS is a very amazing language for styling a web page in every possible way. There are several things we noticed every day that are very tricky and seem impossible via CSS. One of them is the vertical alignment of things in the CSS. But this is not as much harder than we thought.

So now we are making this possible?

It is simple to implement many tricky positioning and aligning things in CSS with the help of Flexbox. Oh, snap did I hear Flexbox for this? Yeah! You are right.

We can do this with the help of CSS. By using display: flex; property we can do this easily.

DEMO

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flexbox!</title>
  <link rel="stylesheet" href="/style.css" />
</head>

<body>
  <div class="container">
    <div class="col-6">
      <h1 class="d-flex">Col-1</h1>
    </div>
    <div class="col-6">
      <h1 class="d-flex">Col-2</h1>
    </div>
  </div>
</body>

</html>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  font-family: monospace;
  padding: .5em;
}

.container {
  width: 100%;
  height: 424px;
  background-color: rgb(0, 0, 0);
  border-radius: 1rem;
  padding: 10px;
}

.col-6 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49.7%;
  height: 400px;
  margin: 2px;
  background-color: rgb(245, 238, 238);
  border: 1px solid black;
  border-radius: 1rem;
  float: left;
}
Featured Templates

14 Free HTML CSS website templates

Here is the collection of some free and personal use HTML CSS website templates which may help you to get started on the web.

3 min read

How to send HTML form data without server-side coding

Sending your form data and manage it can be a very tricky process. In this tutorial, we will send our website's form data to Google sheets without any server-side coding.

4 min read