[Andre CParticipant]

Hi guys. I hope you are well.
I did a search on the forums and found a few different answers to aligning a text smack center (both horizontally and vertically).

Is there a way to do that in Cornerstone that does not require padding? This seems like such an obvious feature, and maybe I am just not “seeing” it.

Thank you guys!

[ZeshanMember]

Hi Andre,

Thanks for writing in!

Yes, you can achieve Text Alignment under the element’s settings (see: http://prntscr.com/7eo7ga). This is a horizontal alignment. In regard to the vertical alignment, it isn’t possible out of the box. This requires deep CSS and template customization to be achieved. We’d love to help, but regretfully, it would fall beyond the scope of support we can provide. You may wish to consult a developer to assist you with this.

Thanks for understanding.

[Andre CParticipant]

Thank you for the reply, although it was not the one I wanted to see.
I am aware of how to align horizontally; I have such a hard time understanding why aligning vertically is such an issue…I know it is not X´s issue, but still…very odd!

[ChristopherModerator]

Hi there,

As we mentioned in previous replay vertical alignment need customization, because it needs some functions to measure height of content each time an then compare it with height of container and this requires high customization , that’s why we ask you add padding on top and bottom of element to align it.

Thanks.

[Chris FParticipant]

The was possible before Cornerstone:

.entry-content > #x-content-band-3 .x-column,
.entry-content > #x-content-band-7 .x-column {
vertical-align: middle;
float: none;
margin-right: 0;
display: inline-block;
}

.entry-content > #x-content-band-3 .x-column.one-half,
.entry-content > #x-content-band-7 .x-column.one-half {
width: 49.9%;
}

[Paul RModerator]

Thanks for sharing Chris, though your code will affect the columns on every third and seventh content band on every page.

We can use a class instead.

1. Add v-align in the class field of your columns you want to vertically align.
2. Add this in custom > css box in the customizer.

.v-align {
   float: none;
   margin-right: 3.5%;
   display: inline-block;
   vertical-align: middle;
}

3. Please note that this will only work if the elements inside your column has no margin(top-bottom) and padding(top-bottom).

Thanks

[Author]

Posts