Textpattern CMS

#1 2016-07-08 15:41:45

RedFox

Member

From: Netherlands

Registered: 2005-03-25

Posts: 805

Website

A specific CSS question: How to move h1 vertically in an absolute ...

… horizontal and vertical centered box?

I’ve made a fiddle so you can see what I’m trying to accomplish. I can move h2 vertically by giving h1 a (negative) margin-bottom. But what to do if I want to pull up h1 (+ h2) too?

Last edited by RedFox (2016-07-09 11:00:17)

#2 2016-07-08 16:14:31

sacripant

Plugin Author

From: Rhône — France

Registered: 2008-06-01

Posts: 479

Website

Re: A specific CSS question: How to move h1 vertically in an absolute ...

an advice :
For this case: don’t fix your header with pixel size. It’s not good if :

• user want zoom text (zoom text only)
• your title or subtitle are long and need more one line of text

And absolute positionning is not necessary.

in my opinion it is best if you

• allow height:auto for .hgroup and just add min-height: 260px for manage backgound image.
• centering h1 and h2 with display-flex or display:table-cell & vertical-align:middle in .hgroup

Edit for add jsfiddle url :
jsfiddle.net/nrq75zao/

Last edited by sacripant (2016-07-08 16:29:26)

---

sacripant.fr | @_sacripant