Question 190829 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I get my tagline (h1 element) to not be center aligned?

I’m working on a website and I want the majority of my elements to be center aligned. Each element is wrapped inside a section so that I can smooth scroll from one page to the next. I have an h1 element that says "Build Your Future" and I’m trying to align it perfectly to the left, just above where it says "Purpose" however no matter what I do, I can’t seem to override my section where it says align-items: center for this particular element. I’ve tried changing the width and the text-align but it’s still stuck in the center.

section {
  background-color: #fff;
  height: 100vh;
  height: fill-available;
  min-height: -moz-available;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.box {
  background-color: white;
  display: flex;
  justify-content: space-between;
  width: 60vw;
}

.service h1 {
  display: flex;
  width: 100%;
  align-items: left;
  text-align: left;
}
<section class="service">
        <div>
          <h1>Build Your Vision</h1>
        </div>
        <div class="box">
          <div>
            <h2>Purpose</h2>
            <p>Built with your vision</p>
          </div>
          <div>
            <h2>Authentication</h2>
            <p>From services you can trust</p>
          </div>
          <div>
            <h2>User Interface</h2>
            <p>Accessible from any device</p>
          </div>
        </div>
      </section>
Tags:

4

Answers


  1. 0

    In fact by setting you section service in flex with justify content center the width of your parent h1 is basically set to fit content.
    So you have two choices:
    First one is to sort out the h1 div of the service section
    Second one is to set à width to the parent div

      <div>
    <h1>Build Your Vision</h1>
  </div>
  <section class="service">
    <div class="box">
      <div>
        <h2>Purpose</h2>
        <p>Built with your vision</p>
      </div>
      <div>
        <h2>Authentication</h2>
        <p>From services you can trust</p>
      </div>
      <div>
        <h2>User Interface</h2>
        <p>Accessible from any device</p>
      </div>
    </div>
  </section>

    or

      <div class="title">
    <h1>Build Your Vision</h1>
  </div>

  .title{
     width: 100%
   }
    Login or Signup to reply.
  2. 0

    You can use align-self property on your element and use flex-start to move your element to the start of the container. I added a class on you title element

    section {
  background-color: #fff;
  height: 100vh;
  height: fill-available;
  min-height: -moz-available;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.box {
  background-color: white;
  display: flex;
  justify-content: space-between;
  width: 60vw;
}

/* added this*/
.title {
    align-self: flex-start;
}

.service h1 {
  display: flex;
  width: 100%;
  align-items: left;
  text-align: left;
}
    <section class="service">
        <div class="title"> <!-- added a new class -->
          <h1>Build Your Vision</h1>
        </div>
        <div class="box">
          <div>
            <h2>Purpose</h2>
            <p>Built with your vision</p>
          </div>
          <div>
            <h2>Authentication</h2>
            <p>From services you can trust</p>
          </div>
          <div>
            <h2>User Interface</h2>
            <p>Accessible from any device</p>
          </div>
        </div>
      </section>
    Login or Signup to reply.
  3. 0

    To address the issue, you should use the parent container of the h1 element (which is a div in this case) instead of the <section> element. The problem you encountered is due to a limitation of the element.

    To solve this, you can apply a CSS rule by specifying the class. In this case, the <section> element has the class "service," so we can utilize that. Additionally, we want to target only the first div inside the section, which can be achieved using the :nth-child(1) selector.

    Finally, we set the width of the selected div to be the same length as the box class. Here’s the updated code:

    .service > div:nth-child(1) {
    width: 60vw;
}

    By applying this CSS rule, the width of the first div inside the section element with the "service" class will be set to 60% of the viewport width.

    Hope this helps! Let me know if you have any further questions.

    section {
  background-color: #fff;
  height: 100vh;
  height: fill-available;
  min-height: -moz-available;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.box {
  background-color: white;
  display: flex;
  justify-content: space-between;
  width: 60vw;
}

.service h1 {
  display: flex;
  width: 100%;
  align-items: left;
  text-align: left;
}

.service > div:nth-child(1) {
    width: 60vw;
}
    <section class="service">
  <!-- First Row -->
  <div>
    <h1>Build Your Vision</h1>
  </div>
  <!-- Second Row -->
  <div class="box">
    <div>
      <h2>Purpose</h2>
      <p>Built with your vision</p>
    </div>
    <div>
      <h2>Authentication</h2>
      <p>From services you can trust</p>
    </div>
    <div>
      <h2>User Interface</h2>
      <p>Accessible from any device</p>
    </div>
  </div>
</section>
    Login or Signup to reply.
  4. 0

    The easiest solution would probably just be to modify your markup a bit, but here is a dynamic solution that will work without hard-coding a width/height value using grid.

    The code is explained in the comments.

    section {
  background-color: #fff;
  height: 100vh;
  height: fill-available;
  min-height: -moz-available;
  /*display: flex;
  justify-content: center;
  align-items: center; */
  
  display: grid;               /* grid layout */
  grid-template-columns: 1fr;  /* 1 column */
  width: fit-content;          /* set the width equal to the content width */
  align-content: center;       /* center everything vertically */
  margin-inline: auto;         /* center horizontally - shorthand for margin-left + margin -right */
  overflow-x: hidden;
}


.box {
  background-color: white;
  display: flex;
  justify-content: space-between;
  width: 60vw;
}
    <section class="service">
  <div>
    <h1>Build Your Vision</h1>
  </div>
  <div class="box">
    <div>
      <h2>Purpose</h2>
      <p>Built with your vision</p>
    </div>
    <div>
      <h2>Authentication</h2>
      <p>From services you can trust</p>
    </div>
    <div>
      <h2>User Interface</h2>
      <p>Accessible from any device</p>
    </div>
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search