Cornerstone – aligning center – Themeco Community

Cornerstone – aligning center

Andre C — Mon, 08 Jun 2015 12:53:15 +0000

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!

Reply To: Cornerstone – aligning center

Zeshan — Mon, 08 Jun 2015 19:36:15 +0000

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.

Reply To: Cornerstone – aligning center

Andre C — Mon, 08 Jun 2015 20:51:52 +0000

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!

Reply To: Cornerstone – aligning center

Christopher — Tue, 09 Jun 2015 09:58:02 +0000

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.

Reply To: Cornerstone – aligning center

Chris F — Mon, 24 Aug 2015 08:51:35 +0000

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%;
}

Reply To: Cornerstone – aligning center

Paul R — Mon, 24 Aug 2015 09:01:53 +0000

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