CODEWITHSUNDEEP
htmlcss
xms
xms

Reputation: 437

Vertical align of h2 tags inside several divs

I have a parent div and several child divs inside it. I would like to get the top of each h2 tag be the same. Now it is not.

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;">
  <div style="display:inline-block;vertical-align:middle">
    <div style="float:left;top:0"><h2>L2</h2></div>
    gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd
  </div>

  <div style="display:inline-block;vertical-align:middle">
    <div style="float:left:top:0"><h2>R1</h2></div>
    gdgsdgsgsgsgs<br>gsgsgsgsdgsg
  </div>

  <div style="display:inline-block;vertical-align:middle">
    <div style="float:left:top:0"><h2>W1</h2></div>
    gdgsdgsgsgsgs
  </div>
</div>

Upvotes: 0

Views: 65

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105883

If you use flex and make h2 and text container sibblings, margin should finalyze it:

body> div,
body > div > div {
  display:flex;
}
body> div {
  justify-content:center;
}
body > div > div {
  padding:0 1em;
  flex-flow:column;
}
body > div > div >  h2 {
  margin:0;
  text-align:center
}
body > div > div > div {
  margin:auto;
}
<div>
  <div>
    <h2>L2</h2>
    <div>gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd</div>
  </div>
  <div>
    <h2>R1</h2>
    <div>gdgsdgsgsgsgs<br>gsgsgsgsdgsg</div>
  </div>
  <div>
    <h2>W1</h2>
    <div>
      gdgsdgsgsgsgs</div>
  </div>
</div>

your code under my minimalistic example:

body> div,
body > div > div {
  display:flex;
}
body> div {
  justify-content:center;
  text-align:center
}
body > div > div {
  padding: 1em 0.125em;
  flex-flow:column;
}
body > div > div >  h2 {
  margin:0 0 0.75em;
}
body > div > div > div {
  margin:auto;
}
h2 {
  background:lightblue
}
h1 {
  font-size:1rem;
  color:tomato;
  margin:0;
  text-align:center;
<h1>minimalistic flex layout version </h1>
<div>
  <div>
    <h2>L2</h2>
    <div>gdgsdgsgsgsgs
      <br>gsgsgsgsdgsg
      <br>gsdgdsgdsgdsgd</div>
  </div>
  <div>
    <h2>R1</h2>
    <div>gdgsdgsgsgsgs
      <br>gsgsgsgsdgsg</div>
  </div>
  <div>
    <h2>W1</h2>
    <div>
      gdgsdgsgsgsgs</div>
  </div>
</div>
<hr/>
<h1>below your code </h1>
<section>
  <div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;">
    <div style="display:inline-block;vertical-align:middle">
      <div style="float:left:topleft;top:0">
        <h2>L2</h2>
      </div>
      gdgsdgsgsgsgs
      <br>gsgsgsgsdgsg
      <br>gsdgdsgdsgdsgd
    </div>

    <div style="display:inline-block;vertical-align:middle">
      <div style="float:left:top:0">
        <h2>R1</h2>
      </div>
      gdgsdgsgsgsgs
      <br>gsgsgsgsdgsg
    </div>

    <div style="display:inline-block;vertical-align:middle">
      <div style="float:left:top:0">
        <h2>W1</h2>
      </div>
      gdgsdgsgsgsgs
    </div>
  </div>
</section>

Upvotes: 0

5eeker
5eeker

Reputation: 1027

Please check below code. I just changed the style="float:left:top:0px"

to style="float:left;top:0px". You missed a ; semicolon. and I added your content in another <div>.

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;">
  <div style="display:inline-block;vertical-align:middle">
    <div style="float:left;top:0px"><h2>L2</h2></div>
    <div style="height:50px;">gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd</div>
  </div>

  <div style="display:inline-block;vertical-align:middle">
    <div style="float:left;top:0px"><h2>R1</h2></div>
    <div style="height:50px;">gdgsdgsgsgsgs<br>gsgsgsgsdgsg</div>
  </div>

  <div style="display:inline-block;vertical-align:middle">
    <div style="float:left;top:0px"><h2>W1</h2></div>
    <div style="height:50px;">gdgsdgsgsgsgs</div>
  </div>
</div>

Upvotes: 0

Rudi Urbanek
Rudi Urbanek

Reputation: 1943

best way to do this is to use display flex and flex styling in the parent div

<div style="display: flex; align-items: baseline; justify-content:center; width: 100%;">
  <div style="display:inline-block;vertical-align:middle; padding: 16px;">
    <div style="float:left:top:0">
      <h2>L2</h2>
    </div>
    gdgsdgsgsgsgs
    <br>gsgsgsgsdgsg
    <br>gsdgdsgdsgdsgd
  </div>

  <div style="display:inline-block;vertical-align:middle; padding: 16px;">
    <div style="float:left:top:0">
      <h2>R1</h2>
    </div>
    gdgsdgsgsgsgs
    <br>gsgsgsgsdgsg
  </div>

  <div style="display:inline-block;vertical-align:middle, padding: 16px;">
    <div style="float:left:top:0">
      <h2>W1</h2>
    </div>
    gdgsdgsgsgsgs
  </div>
</div>

Upvotes: 0

Nishant Kumar
Nishant Kumar

Reputation: 71

Setting your inline blocks to vertical-align:top; will solve the problem for you. Additionally i would like to point out that you have given colon(:) instead of semicolon in between the inline css properties of the divs inside the inline blocks. So, the final code should be as follows:

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;">
    <div style="display:inline-block;vertical-align:top">
        <div style="float:left;top:0">
            <h2>L2</h2>
        </div>
        gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd
    </div>
    <div style="display:inline-block;vertical-align:top">
        <div style="float:left;top:0">
            <h2>R1</h2>
        </div>
        gdgsdgsgsgsgs<br>gsgsgsgsdgsg
    </div>
    <div style="display:inline-block;vertical-align:top">
        <div style="float:left;top:0">
            <h2>W1</h2>
        </div>
        gdgsdgsgsgsgs
    </div>
</div>

Upvotes: 1

Related Questions