CODEWITHSUNDEEP
htmlcss
Draven
Draven

Reputation: 1467

Middle vertical-align on inline-block's without setting height

This seems so simple but I can't get it right.

My work-features box aligns to the bottom. I've tried to use vertical-align: middle but that makes it worse.

I'd rather not set a fixed height, use float's, or jQuery to accomplish this. Also can't change the HTML inside the <div class="work"> block.

I have read some of the others questions on SO but none of the solutions worked for me.

JSFiddle

HTML

<article class="post">
    <div class="entry" lang="en">
        <div class="work">
            <ul class="work-features">
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Cras facilisis urna in vulputate vehicula.</li>
            </ul>
            <div class="work-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum elit nec elementum tincidunt. Duis pharetra vehicula odio sit amet rhoncus. Cras id est tincidunt, dictum lacus id, venenatis orci. Nulla consequat nunc nec nisl blandit, non porta ipsum rhoncus. Praesent eleifend bibendum dignissim. Pellentesque a scelerisque dolor, nec auctor eros. Nam eu nunc nisl. Quisque sed varius lorem. Suspendisse a tellus vel lacus elementum mollis ac ut turpis. Morbi scelerisque viverra dignissim. Curabitur id semper nisi, in eleifend elit. Pellentesque dapibus auctor erat, a posuere eros.</div>
        </div>
    </div>
</article>

CSS

ol, ul {
    list-style: none outside;
}
.entry .work .work-features {
    display: inline-block;
    width: 180px;
}
.entry .work .work-features li {
    font-size: 15px;
    padding-bottom: 5px;
}
.entry .work .work-description {
    display: inline-block;
    width: 640px;
    font-size: 18px;
    line-height: 1.5;
}

Upvotes: 0

Views: 32

Answers (1)

Oriol
Oriol

Reputation: 287980

It seems you tried adding vertical-align: middle to .work-features. You should also add it to .work-description in order to make it work.

.work-features, .work-description {
  vertical-align: middle;
}


ol, ul {
  list-style: none outside;
}
.entry .work .work-features {
  display: inline-block;
  width: 180px;
}
.entry .work .work-features li {
  font-size: 15px;
  padding-bottom: 5px;
}
.entry .work .work-description {
  display: inline-block;
  width: 640px;
  font-size: 18px;
  line-height: 1.5;
}
.work-features, .work-description {
  vertical-align: middle;
}
<article class="post">
  <div class="entry" lang="en">
    <div class="work">
      <ul class="work-features">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        <li>Cras facilisis urna in vulputate vehicula.</li>
      </ul>
      <div class="work-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum elit nec elementum tincidunt. Duis pharetra vehicula odio sit amet rhoncus. Cras id est tincidunt, dictum lacus id, venenatis orci. Nulla consequat nunc nec nisl blandit, non porta ipsum rhoncus. Praesent eleifend bibendum dignissim. Pellentesque a scelerisque dolor, nec auctor eros. Nam eu nunc nisl. Quisque sed varius lorem. Suspendisse a tellus vel lacus elementum mollis ac ut turpis. Morbi scelerisque viverra dignissim. Curabitur id semper nisi, in eleifend elit. Pellentesque dapibus auctor erat, a posuere eros.</div>
    </div>
  </div>
</article>

Upvotes: 1

Related Questions