Center H3 in section

-1

I'm trying to fix an error in my site to leave h3 in the center of the section, I've tried several methods, I do not know if it can is error or another.

CSS is this:

.BlackSky{
  background-color: #1C1624;
  width: 100%;
  height: 300px;
}
.StarsSky{
  width: 100%;
  height: 100%;
  background-image: url('../images/star.png');
}
.StarsSky h3{
  font-size: 4em;
  color: #F0FFFF;
  margin-bottom:0%;
}

and the HTML is this:

<section class="BlackSky">
  <section class="StarsSky">
    <h3>Givago Fritzen</h3>
  </section>
</section>
    
asked by anonymous 29.04.2018 / 00:43

5 answers

2

As stated above, you can use the flexbox

By analyzing your site, I think the following code would result in the desired one!

.StarsSkyContent {
    height: 80vh;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}

The height: 80vh property determines that this section will occupy a size of 80% of the screen, and the other properties are to determine the position of the element on the page!

    
29.04.2018 / 18:28
0

If the problem is just to center the <h3> , I think it can be resolved with display:flex and justify-content:center , below:

.BlackSky{
  background-color: #1C1624;
  width: 100%;
  height: 300px;
}
.StarsSky{
  width: 100%;
  height: 100%;
  background-image: url('../images/star.png');
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.StarsSky h3{
  font-size: 4em;
  color: #F0FFFF;
  margin-bottom:0%;
}
<section class="BlackSky">
  <section class="StarsSky">
    <h3>Givago Fritzen</h3>
  </section>
</section>
    
29.04.2018 / 01:08
0

section{
  background-color: #1C1624;
  width: 100%;
  height: 300px;
}
.StarsSky {
  width: 100%;
  height: 100%;
  background-image: url('../images/star.png');
}
h3{
  font-size: 4em;
  color: #F0FFFF;
  text-align: center; 
  position: relative;
  margin:0;
  top: 50%;
  left: 50%; 
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
<section class="BlackSky">
  <section class="StarsSky">
    <h3>Givago Fritzen</h3>
  </section>
</section>

you can use:

.h3 {

}
    
29.04.2018 / 02:49
0

Try to use margin: 0 auto; . If it does not, try leaving the section as flex!

Remembering, margin can be used in several ways, saying which sides of the magin you want to use: margin-left , or can be used as margin: 10px 10px; Being the first value, the top bottom and the second value is responsible for: left and right . I do not know if you could understand.

    
29.04.2018 / 03:58
0

Try this.

<style>
 .text-center{ text-align: center; }
</style>

<h3 class="text-center"> texto exemplo </h3>
    
30.04.2018 / 20:41