Warm tip: This article is reproduced from stackoverflow.com, please click
alignment css frontend html

Getting a webpage to take up 60% and be centered?

发布于 2020-04-13 09:27:25

I'm trying to create a website whose body up the middle 60%. I thought I'd do this:

body {
  align-items: center;
  text-align: left;
  justify-content: center;
  width: 60%;
}

But that's not working :(

I even tried using translateX to translate right 20%

Any advice? Suggestions?

Questioner
Manaal Siddiqui
Viewed
18
Paweł Jacewicz 2020-02-03 03:30

You can achieve it easily using CSS grid. Here's the MDN reference: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

Example:

HTML file

<div class="container">
  <div class="content">
    Some content
  </div>
</div>

CSS file

.container {
  display: grid;
  grid-template-columns: 20% 60% 20%;
}

.content {
  grid-column: 2;
}