Centralize H3 in the Section

Asked

Viewed 939 times

-1

I’m trying to correct a mistake in my website to leave the h3 in the center of the Section, I have tried several methods, I do not know if it can be error or other.

the 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>
css

5 answers

2

As answered above, you can use the property of flexbox

Analyzing your site, I think the following code would result in the desired!

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

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

0

Try it like this.

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

<h3 class="text-center"> texto exemplo </h3>

0

If the problem is just centering the <h3>, I believe it can be solved with display:flex and justify-content:center, goes 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>

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>

can use :

.h3 {

}

  • It worked perfectly. Thanks. (sorry to reply twice)

0

Try to use margin: 0 auto;. If not, try to leave the Section flex!

Remembering, margin can be used in many ways, telling which sides of magin you want to use: margin-left, or can be used as margin: 10px 10px;Being the first value, the responsible for the top and bottom and the second value, responsible for: left and right. I don’t know if you understand.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.