Vertical align

HTML & CSS
1

Please take a look at this site http://nhquang.com/insights/our-books/page/2/ There are two problems here:

  1. The content is over the image. I am using position:absolute for vertical align. If I disable position:absolute, it’s working fine.

  2. There are actually 6 entries on that page. However, two of them are hidden somehow. Cannot figure out the reason.

Any help please?
Thanks.

2

I would avoid the excessive use of positioning on the page, try to keep everything in the natural flow as much as possible or you will have these problems.
Using display: table/table-cell for the book and text, should put them side by side nicely and allow you to use vertical-align.

1 Like
3

Thanks for answering. I changed to table/table-cell, but vertical-align seems not working. All text are still from the top. Idea?

Thanks.

4

The container with the book cover inside needs to be table-cell too.

5

As mentioned above , using positioning is not best practice. It depends too much on ‘magic numbers’ and/or all the content being just so.

an alternate to using tables, however, would be to give both parts of the content display:inline block; then you can also use vertical-align.

1 Like
6

So, I tried both table-cell and inline-block for both div of the book cover and content. But vertical-align is not applied. Can you take a look again and educate me what I am missing there?

Thanks.

7

That’s odd, I had it working in inspect earlier, but not now. What has changed?

8

It never works for me. Only added a .book-image with “display: table-cell” to the book cover div. But before and after, vertical-align is not working for me.

9

If you want to align the text to the middle of the image add this.

.book-items{width:100%}
.book-image,.book-content{vertical-align:middle;float:none}
.book-image{padding-right:10px}
.book-content p{margin:0}
1 Like
10

I think it’s the float rule stopping it on .three-fourths.

11

Yes, the float rule stopping it. Any workaround? Or will I need to change the whole format?

Thanks.

12

Thank you. But the text will need to be on the bottom, not in the middle.

13

Then just add this rule to what I gave you before:

.book-content{vertical-align:bottom}

1 Like
14

Now, we are talking the same thing :slight_smile: Thanks a lot!

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.