Heading position alignment

Question

div.c {
  width: 25px;
  height: 10px;
  background-color: black;
  margin: 12px 0;
  border-radius: 5px;
  display: block;
}

<body>
  <div class="header" ,style="display: inline">
    <div class="menu">
      <div class="c"></div>
      <div class="c"></div>
      <div class="c"></div>
    </div>
    <h1>GeekForGeek</h1>

Here I want GeekForGeek to be in the center in the position which is marked yellow here

But it is getting displayed as shown in fig.

Diego D · Accepted Answer · 2022-07-19T14:21:55.470

0

For example using a three columns layout (via display flex) on your header.

I made a demo to show the concept:

div.c {
  /*width: 60px;*/
  width: 60px;
  height: 10px;
  background-color: black;
  margin: 12px 0;
  border-radius: 5px;
  display: block;
}

.header {
  display: flex;
  flex-direction: row;  
  width: 100%;
}

.header > div {
  /*border just for educational purpose.. remove it*/
  border: dashed 3px gray;
  flex: 33.33%;
}

.header h1{
  text-align: center;
}

/*-----------------------*/

.contents{
  border: dashed 3px gray;
  margin-top: 1rem;
  font-size: 1.5rem;
  padding: 1rem;
}

.contents ol li{
  margin-bottom: 1rem;
}

<div class="header">
  <div class="menu">
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
  </div>
  <div>
    <h1>GeekForGeek</h1>
  </div>
  <div>
  </div> 
</div>

<div class="contents">
  <ol>
    <li>I took the freedom to change the width of your hamburger menu selector, because it's common practice to have it more square shaped.. yours was very narrow in size;</li>
    <li>The 3 columns layout grants you that the block in the middle will be perfectly centered related to the full width of the viewport;</li>
    <li>The side effect is having to include the third column despite being empty;</li>
    <li>The borders on header's blocks should be removed in the corresponding css rule and were added just to better show off the layout;</li>
  </ol>
</div>

edited Jul 19 '22 at 14:21

answered Jul 19 '22 at 14:01

Diego D

6,156
2
17
30

.header > div { flex: 33.33%; } What is this 33.33%. – Frecoder Jul 20 '22 at 23:55
3 columns layout : 100% / 3 = 33.33% – Diego D Jul 21 '22 at 06:18
Why changing it to any other percentage is giving the same result, pleaseexplain. – Frecoder Jul 21 '22 at 14:27
as of https://developer.mozilla.org/en-US/docs/Web/CSS/flex the `flex` property is a shorthand for `flex-basis` when used with one value only (and having a unit, % in our case). The `flex-basis` CSS property sets the initial main size of a flex item. Setting it with 33% was one of the possible strategy to spread the width equally. If you use different % I see it has odd results because it applies the value the same for each column and the sum doesn't get to 100%. By the way using a value unitless, the property would be a shorthand for `flex-grow` (like `flex: 1;`) – Diego D Jul 21 '22 at 14:36
can suggest me where to learn Front End development – Frecoder Sep 22 '22 at 14:44

score 0 · Answer 2 · answered Jul 19 '22 at 14:04

0

use flex and margin auto for h1

div.c {
  width: 25px;
  height: 10px;
  background-color: black;
  margin: 12px 0;
  border-radius: 5px;
  display: block;
}

.header {
  display: flex;
}

h1 {
  margin-left: auto;
  margin-right: auto;
}

<body>
  <div class="header" ,style="display: inline">
    <div class="menu">
      <div class="c"></div>
      <div class="c"></div>
      <div class="c"></div>
    </div>
    <h1>GeekForGeek</h1>
  </div>

answered Jul 19 '22 at 14:04

Mohamad

602
2
5
18

the h1 element will be centered in the remaining space not relative to the viewport width.. that's why I proposed a 3 cols layout. But the OP wasn't clear on that picture indeed – Diego D Jul 19 '22 at 14:08
@DiegoDeVita exactly so both are solutions for him because he didn't specify anything – Mohamad Jul 19 '22 at 14:13

Heading position alignment

2 Answers2