Have a text appear centered, with space above and below

Question

Have a text appear centered, with space above and below

Navigation

#1 by (7 votes)
#2 by (5 votes)
#3 by (4 votes)

3

I was solving a very simple exercise and I ran into a problem in the alignment of the elements.

I want the h1 to be centered. But the author of the tutorial uses *{ padding:0; margin: 0;} so that everything in the document is centered, and that does not seem to be working.

I detail the code in html and css. And I also add an image of what the ebook suggests (with which I am learning) that should be the page.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="description" content="A quiz game for ninjas">
      <meta name="author" content="DAZ">
      <title>Quiz Ninja</title>
      <link rel="stylesheet" href="css/styles.css">
   </head>
   <body>
      <header>
         <h1>Quiz Ninja!</h1>
      </header>
      <script src="js/scripts.js"></script>
   </body>
</html>

And the document css:

* {
  margin: 0;
  padding: 0;
}

header {
  font: bold 36px/120% Arial, Helvetica, sans-serif;
  background: #333;
  color: #c00;
  text-transform: uppercase;
}

When I run the html on my browser, it looks like this. Do not worry about Javascript functionality because the capture of the ebook is of a more advanced instance, but the css file remains the same.

html css

asked by Federico Grandon Soporsky 12.05.2017 в 21:19

source

3 answers

5

You need two properties in your style sheet.

The first is the one that makes your text look centered and is text-align and its value, as you can imagine is center .

The second one is called padding and creates a space within the element. When you use it with a single argument, add the indicated space on all four sides. When you use it with two parameters ( as in this example ), the first value refers to the space above and below; and the second on the left and right. If you use padding with four parameters, one refers to each side: up, right, down, left, in that order .

header {
  font: bold 36px/120% Arial, Helvetica, sans-serif;
  background: #333;
  color: #c00;
  text-transform: uppercase;
  padding: 20px 0;
  text-align: center;
}

<header>
  <h1>Quiz Ninja!</h1>
</header>

answered by 12.05.2017 в 21:35

4

To generate the result you want, I put the header inside a center.

So that it does not go out of size, I reversed the order of 36px/120% to 120%/36px , and it looks more or less as you want.

* {
  margin: 0;
  padding: 0;
}

header {
  font: bold 120%/36px Arial, Helvetica, sans-serif;
  background: #333;
  color: #c00;
  text-transform: uppercase;
}

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

<head>
  <meta charset="utf-8">
  <meta name="description" content="A quiz game for ninjas">
  <meta name="author" content="DAZ">
  <title>Quiz Ninja</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <center>
    <header>
      <h1>Quiz Ninja!</h1>
    </header>
  </center>
  <script src="js/scripts.js"></script>
</body>

</html>

answered by 12.05.2017 в 21:36

Segmentation Fault - Recursion Change the font to comic sans in the Visual Studio editor

score 7 · Accepted Answer

For the example you propose, it is simpler and, in my opinion, more readable and understandable in the following way.

We have a main container <header> that surrounds another container <h1> , then we could use the following css and now I explain it:

header {
  background: #333;
  height: 100px;
}

header>h1 {
  text-align: center;
  font: bold 36px Arial, Helvetica, sans-serif;
  line-height: 100px;
  color: #c00;
  text-transform: uppercase;
}

<header>
  <h1>Quiz Ninja!</h1>
</header>

First, I give a background color to the main container <header> and a size set to your liking. In this way, we obtain in my case a box with a width: 100% y height: 100px , with background color #333 .

Now, having inside a <h1> and we want to center it and put it in the middle of the container vertically, I have chosen text-align: center , which horizontally centers the children of the container to which it is applied. In this way, when applied to <h1> , the son text of <h1> is centered.

Then, we put the size and the font with the font property.

To center it vertically, I used line-height: 100px (if you look at it is the same value as the height of the parent container of <h1> ), which means that the container where we apply it has a line height with the indicated value , leaving the content in the center of it (it is like a padding bottom and top at the same time, but without making calculations). In this way, if the container <header> has a height of 100px and the child container <h1> has a line-height of 100px , h1 takes the entire height of the parent container <header> and the indicated text is centered.

Finally, we put the indicated color and it is transformed into uppercase.

and we get the following: