CODEWITHSUNDEEP
htmlcsscentering
meow-meow-meow
meow-meow-meow

Reputation: 528

Center text independent of number of lines

Is it possible to build a css system which will allow a paragraph to center in a page independent of window width? Meaning that as you make the window smaller and the number or lines increases, it will auto adjust to still be centered in the page.

Here's a demo

And here's the existing system:

.container {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 10em;
  background: #fafafa;
}

.title {
 font-size: 1.5em;
 font-weight: 400;
 margin: 0 0 2rem 0;
}

.paragraph {
 font-size: 1em;
 font-weight: 100;
 text-align: justify;
 line-height: 1.5rem;
}

Thank you :)

Upvotes: 1

Views: 187

Answers (1)

Michael Coker
Michael Coker

Reputation: 53709

This is a good reference for centering things https://www.w3.org/Style/Examples/007/center.en.html

You can use top: 50%; left: 50%; transform: translate(-50%,-50%); to put something in the center.

body {
  font-family: sans-serif;
  color: #9ab;
  background: #fff;
}

.container {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  background: #fafafa;
}
.title {
  font-size: 1.5em;
  font-weight: 400;
  margin: 0 0 2rem 0;
}
.paragraph {
  font-size: 1em;
  font-weight: 100;
  text-align: justify;
  line-height: 1.5rem;
}
<div class="container">
  <div class="title">TITLE</div>
  <div class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptas, voluptatibus in accusamus alias voluptatem facilis omnis saepe laudantium, dolorem, nobis modi ratione est doloremque hic enim beatae fugit sapiente!</div>
</div>

You can also use flexbox with align-items: center; justify-content: center;

body {
  font-family: sans-serif;
  color: #9ab;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.container {
  width: 50%;
  background: #fafafa;
}
.title {
  font-size: 1.5em;
  font-weight: 400;
  margin: 0 0 2rem 0;
}
.paragraph {
  font-size: 1em;
  font-weight: 100;
  text-align: justify;
  line-height: 1.5rem;
}
<div class="container">
  <div class="title">TITLE</div>
  <div class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptas, voluptatibus in accusamus alias voluptatem facilis omnis saepe laudantium, dolorem, nobis modi ratione est doloremque hic enim beatae fugit sapiente!</div>
</div>

Upvotes: 2

Related Questions