Centering Things

Vertically Center Text in Div

use the TF mixin .vertical-align

ex:

p {
.vertical-align;
}

Vertically Center Bootstrap Column

There are 2 schemes – an older one used by smarthat 2.0, ashi (ashi_profile_public.php – the rest is done with js) and arons and a newer one used by smarthat 3.0, bcw and forward.
NOTE: neither of these work with auto stacking columns (like for mobile)

new classes:

.tf-row-same-height // put on the row
.tf-col-same-height // put on every column
// alignment classes to add to the cols
.tf-col-same-height-top
.tf-col-same-height-center
.tf-col-same-height-middle
.tf-col-same-height-bottom

old classes:

.container-cols-same-height
.row-cols-same-height
.column-cols-same-height

see demo page for old and new demos: https://trumpetvine-framework.com/bootstrap-rows-and-columns-demo/

Horizontally Center Image

add display:block

<style>
#moo {
display:block;
margin-left:auto;
margin-right:auto;
}
</style>
 
<div><img decoding="async" id="moo" src="https://trumpetvine-framework.com/wp-content/themes/trumpetvine-framework/images/logo.png" /></div>

demo:

>> in TF, just add class “center” to the image!

demo:

Horizontally Align Div

ex:

<div id="wrapper" style=" text-align: center;border:1px solid blue;">    
<div style="display:inline-block;border:1px solid red;">
October 17<br>
5:30 pm - 7:00 pm PDT<br>
(<a href="http://bit.ly/time_introtopact">convert the time for your city</a>)
</div>
</div>