如何对齐多个 <h1> 标签

Question

I wanted to make a header with a title in the center "Resources", left another title "HTML" and right another with "CSS" but I can not align them to put them in the right place and then add a border-right and border-left to separate the left and right title from the title to the center.

For the moment I have this:

 header { border: 2px solid white; border-radius: 20px; background-color: rgba(0, 0, 0, 0.2); color: white; } h1 { display: inline-block; font-size: 30px; font-family: Arial, sans-serif; } h1.html { padding-left: 2%; } h1.res {} h1.css { padding-right: 2%; } 

 <header> <h1 class="html">HTML</h1> <h1 class="res">Ressources</h1> <h1 class="css">CSS</h1> </header> 

Because of the display: inline-block; it works better but I do not know how to do it.

Answer 1

It would be simpler to replace the <h1> tags with <span> elements because they are inline by default. The left and right separation can be accomplished several ways. See example below.

 .header { text-align: center; border-radius: 20px; background-color: rgba(0,0,0,0.2); color:white; font-family: Arial, Helvetica, sans-serif; font-weight: bolder; font-size: 24px; } .header span:nth-child(1) { float: left; width: 33%; border-right: 2px solid white; } .header span:nth-child(3) { float: right; width: 33%; border-left: 2px solid white; } 

 <div class='header'> <span>HTML</span> <span>RESOURCES</span> <span>CSS</span> </div> 

Answer 2

You can use a flex layout to position the headings. Add this to your existing header ruleset:

header {
  display: flex;
  justify-content: space-between;
}