align items

[Keren G]

Hi,

I want that our buttons will align center and the following didn't work:

(wrote this code in the html file)

<style>

.otree-body{
align-items: center;
}

.button {
appearance: button;
backface-visibility: hidden;
background-color: #405cf5;
border-radius: 12px;
border-width: 0;
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
font-size: 100%;
height: 44px;
line-height: 1.15;
margin: 12px 0 0;
overflow: hidden;
padding: 0 25px;
text-align: center;
transform: translateZ(0);
transition: all .2s,box-shadow .08s ease-in;
touch-action: manipulation;
min-height:80px;
min-width: 120px;
align-self: center;
}

</style>

Do you have a suggest how to fix this? 

Thanks,

Keren

[Chris @ oTree]

It might take some trial and error to do this, because for some reason centering things in CSS/HTML can be hard. Take a look at flexbox.

Sent from my phone

On Mar 23, 2022, at 6:58 PM, Keren G <kere...@gmail.com> wrote:



--
You received this message because you are subscribed to the Google Groups "oTree help & discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to otree+un...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/362b4c5e-43f5-473f-98e1-cd8d92d9d465n%40googlegroups.com.

[Keren G]

Hi,

I figured it out, it works with this code:

<div style="
align-items: center;
justify-content: center;
display: flex;">
<button class="button" name="chosen_button" value="A">A</button>
<button class="button" name="chosen_button" value="B">B</button>
<button class="button" name="chosen_button" value="C">C</button>
</div>

ב-יום רביעי, 23 במרץ 2022 בשעה 14:28:45 UTC+2, Chris @ oTree כתב/ה: