How to vertical align two text boxes in a column? - Support

Tagged: align, column, CSS, textbox, vertical

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

January 15, 2020 at 8:01 pm #1174658

BeeCee

Participant

Hi,

I use here a color section with 5 columns.
Each column has 2 text boxes: one for the book title and one for the author below.

Unfortunately I don’t get it to work, that the author is always at the bottom of the framed box; my CSS knowledge is not that good.

View post on imgur.com

Could you please tell me what I have done wrong or how I can achieve it, so that – not matter how many lines the book title has – the author is always aligned at the bottom of the box?

And my custom CSS:


#top .bookshelf {
border-style: double !important;
max-height: 250px !important;
}

#top .bookshelf-title {
	font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.5em;
    letter-spacing: 3px;
	text-align: center;
color: #ffffff;
}

#top .bookshelf-author {
	font-size: 11px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.7em;
	letter-spacing: 3px;
	color: rgba(255,255,255,0.8);
	text-align: center;
	margin-top: 60px;
vertical-align: bottom;
}

Thank you.

January 16, 2020 at 3:08 pm #1175025

Yigit

Keymaster

Hey BeeCee,

I need a username and a password to see your page. However i copied your customizations to my local installation.

Please add following code to Quick CSS as well

#top .bookshelf {
    border-style: double !important;
    max-height: 250px !important;
    height: 180px;
}

Then change following code

#top .bookshelf-author {
    font-size: 11px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.7em;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.8);
    text-align: center;
    margin-top: 60px;
    vertical-align: bottom;
}

To following one

#top .bookshelf-author {
    font-size: 11px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.7em;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.8);
    text-align: center;
    vertical-align: bottom;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
}

Best regards,
Yigit

January 16, 2020 at 4:47 pm #1175108

BeeCee

Participant

This works perfectly, thank you very much, Yigit, I got it to work!

January 16, 2020 at 4:55 pm #1175112