CODEWITHSUNDEEP
csshtmltextalignment
user2204367
user2204367

Reputation: 145

How can I align align text from top of a div?

I have problem with my text align from divs top. How can I make text align vertically from center of .txt div?

#content #main #services {
  width: 1010px;
  height: auto;
  min-height: 320px;
  margin: 50px auto;
}

#content #main #services .langelis {
  width: 510px;
  height: auto;
  min-height: 140px;
  position: relative;
  border: 1px #000 solid;
}

#content #main #services .langelis .icon {
  width: 65px;
  min-height: 140px;
  height: auto;
  float: left;
  border: 1px #000 solid;
}

#content #main #services .langelis .txt {
  width: 440px;
  height: auto;
  float: left;
  border: 1px #000 solid;
}
<div id="services">
  <div class="langelis">
    <div class="icon">
      <img src="images/knyg.jpg" alt="knyga" />
    </div>

    <div class="txt">
      <h1>Lorem Ipsum</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
    </div>
  </div>

  <div class="clear"></div>
</div>

Upvotes: 1

Views: 10061

Answers (1)

Yahya Essam
Yahya Essam

Reputation: 1912

First you need to fix your CSS selectors. You can't write all those IDs this way:

#content #main #services

Just select 1 element and its child. For example if you test this it will work with you:

#services .langelis .txt {
    width: 440px;
    height: auto;
    float: left;
    border: 1px #000 solid;
    text-align:center;
}

If you want it vertical align center of the .txt div you can do this :

#services {
  width: 1010px;
  height: auto;
  min-height: 320px;
  margin: 50px auto;
}

#content #main #services .langelis {
  width: 510px;
  height: auto;
  min-height: 140px;
  position: relative;
  border: 1px #000 solid;
}

#content #main #services .langelis .icon {
  width: 65px;
  min-height: 140px;
  height: auto;
  float: left;
  border: 1px #000 solid;
}

#services .txt {
  width: 440px;
  height: 500px;
  border: 1px #000 solid;
  display: table;
  text-align: center;
}

.sub {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div id="services">
  <div class="langelis">
    <div class="icon">
      <img src="images/knyg.jpg" alt="knyga" />
    </div>

    <div class="txt">
      <div class="sub">
        <h1>Lorem Ipsum</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
      </div>
    </div>
  </div>
  
  <div class="clear"></div>
</div>

Upvotes: 0

Related Questions