One way to solve it is with flexbox.
.center-box {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.inputs {
background-color: #0094FE;
color: white !important;
width: 15%;
height: 50px;
min-width: 100px;
}
.item-lbl {
color: black;
margin-bottom: 5px;
}
<div class="center-box">
<span class="item-lbl" for="inputBestand">Centered Label Above</span>
<b-form-input id="inputBestand" class="inputs" type="number" v-model="bestand" placeholder="Bestand" min="0" max="50"></b-form-input>
</div>
As @cloned mentions. Using a <label> would be more correct than using a span, but either will work.
I tweak the styles little bit to achieve the requirement.
Demo :
new Vue({
el: '#app',
data: {
itemlbl: 'Fujitsu U7511 Notebook Dockingstation',
bestand: null
}
})
.center-box {
left: 20%;
margin-top: 15%;
}
.item-lbl {
display: block;
text-align: center;
}
.inputs {
display: block;
background-color: #0094FE;
color: white !important;
width: 15%;
height: 8%;
min-width: 100px;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<link ref="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css"/>
<div id="app">
<div class="center-box">
<span class="item-lbl" for="inputBestand">{{itemlbl}}</span>
<b-form-input id="inputBestand" class="inputs" type="number" v-model="bestand" placeholder="Bestand" min="0" max="50"></b-form-input>
</div>
</div>
I’m trying to build a Vue.js website.
By doing this, I have a problem.
I want to place a text label centered above an input.
The problem is that the label should be centered and the label should be placed dynamically because the label changes during runtime.
I’ve been trying to solve this for a couple of hours and I tried a lot of things that, sadly, didn’t work for me.
CSS :
.inputs {
position: fixed;
display: block;
background-color: #0094FE;
color: white !important;
width: 15%;
height: 8%;
min-width: 100px;
}
.inputs::placeholder {
color: white !important;
opacity: 0.5 !important;
}
.center-box {
position: relative;
left: 20%;
margin-top: 15%;
}
.item-lbl {
position: fixed;
display: block;
text-align: center;
}
HTML :
<div class="center-box">
<span class="item-lbl" for="inputBestand">{{itemlbl}}</span>
<b-form-input id="inputBestand" class="inputs" type="number" v-model="bestand" placeholder="Bestand" min="0" max="50"></b-form-input>
</div>
This is how it looks right now :
That’s how it should look :
You probably shouldn’t be using fixed positioning. If anything, use it on a wrapper for your form elements.
Save yourself some trouble custom coding CSS and use a CSS framework like Bootstrap. Even if you don’t want to use it in production if you look at the source code of a generated page of Bootstrap CSS it will show you the underlying CSS used to format things.
Semantically speaking: You don’t have any label in your code, only a span. Even tough your span has a
