How to style horizontally and vertically? - html

Question

<div class="flex-container">
<div class="flex-row">
<li class="org-li" v-for="o in orgs">
<div class="flex-item">
<button v-b-modal.link_printer #click="click_org(o.id)" class="org-btn">
<img class="org-img" :src="`http://localhost:8080/orgs/org_pictures/${o.img}`" alt=""/>
</button>
</div>
<li class="printer-li" v-for="p in printers[o.id]">
<div class="flex-item">
<button variant="outline-primary" class="printer-btn" v-bind:org_id="`${o.id}`" v-bind:printer_id="`${p.id}`" #click="onClick(o.id, p.id, p.serial_number)" >
<img class="printer-img" :src="`http://localhost:8080/printers/printer_pictures/${p.img}`" alt=""/>
</button>
</div>
</li>
</li>
</div>
</div>
I want the org-img to be 55px x 55px and I want the printer-img to be 25px x 25px. Each org-btn and printer-btn should be centered vertically on the screen.
I have been having difficulties with the printer-img being slightly offset from being vertically aligned.

Answer 1

you can do it that way. This adds the CSS styles to your component's block. The .org-img and .printer-img styles will define the width and height of the images, and the .flex-item style will center the buttons within the div elements that contain them. And the .flex-container will wrap the content inside on overflow.
You can make adjustments as needed to match your component's specific structure and class naming.
<template>
<div class="flex-container">
<div class="flex-row">
<li class="org-li" v-for="o in orgs">
<div class="flex-item">
<button v-b-modal.link_printer #click="click_org(o.id)" class="org-btn">
<img class="org-img" :src="`http://localhost:8080/orgs/org_pictures/${o.img}`" alt=""/>
</button>
</div>
<li class="printer-li" v-for="p in printers[o.id]">
<div class="flex-item">
<button variant="outline-primary" class="printer-btn" v-bind:org_id="`${o.id}`" v-bind:printer_id="`${p.id}`" #click="onClick(o.id, p.id, p.serial_number)" >
<img class="printer-img" :src="`http://localhost:8080/printers/printer_pictures/${p.img}`" alt=""/>
</button>
</div>
</li>
</li>
</div>
</div>
</template>
<style>
.org-img {
width: 55px;
height: 55px;
}
.printer-img {
width: 25px;
height: 25px;
}
.flex-item {
display: flex;
align-items: center;
justify-content: center;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
</style>