I'm trying to make a design html/css for a form like in this image:
https://postimg.org/image/u2rrzgz09/
Form should be in the center of background(-image), text(Text1 and Text2) should begin where the fields begins (left) and button should be displayed in center of form.
I did until now:
https://jsfiddle.net/jk17sj87/
HTML:
<div class="parent">
<div class="col1">
<div class="text">
Text1
</div>
<div class="sec11">
(image)
<input type="text"/>
</div>
<div class="sec2">
(image)
<input type="text"/>
</div>
</div>
<div class="col2">
<div class="text">
Text2
</div>
<div class="sec3">
(image)
<input type="text"/>
</div>
<div class="sec4">
(image)
<input type="text"/>
</div>
</div>
</div>
<div class="button">
<button>Button</button>
</div>
CSS:
.parent{ width: 100%; display: flex;}
.col1{margin-right: 10px;}
.text{margin-left: 52px;}
.button {margin-left: 200px;}
/*Programs*/
.parent{
width: 100%;
display: flex;
height: 100%;
min-height: 200px;
}
.col1, .col2 {
display: inline-block;
}
.text{
margin-left: 52px;
}
.button {
text-align: center;
}
.parent-content {
margin: auto;
}
<div class="parent">
<div class="parent-content">
<div class="col1">
<div class="text">
Text1
</div>
<div class="sec11">
(image)
<input type="text"/>
</div>
<div class="sec2">
(image)
<input type="text"/>
</div>
</div>
<div class="col2">
<div class="text">
Text2
</div>
<div class="sec3">
(image)
<input type="text"/>
</div>
<div class="sec4">
(image)
<input type="text"/>
</div>
</div>
<div class="button">
<button>Button</button>
</div></div></div>
.parent {
width: 100%;
display: flex;
max-width: 465px;
margin: 0 auto;
}
.button {
text-align: center;
}
Related
I am trying to position the following elements one below the other , but one to the left and other to the right:
my code:
here is the fiddle: https://jsfiddle.net/ak9hxfpt/2/
I want to position the test2 to the right of the test1 div, but it should appear below the test1 div
What I want to achieve is something like: https://jsfiddle.net/ak9hxfpt/3/
however this works only for one div, if I try float: right for all the divs I have this is what I get which is not working out for me:
https://jsfiddle.net/ak9hxfpt/4/
the every "remove link" content should appear below every "some content".
any ideas on how this can be achieved
.test2 {
margin-bottom: 30px;
}
.test1 {
border: 1px solid #000;
margin-bottom: 10px;
width: 93%;
}
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
just add some margin-left
.test2 {
margin-bottom: 30px;
margin-left:80%;
}
.test1 {
border: 1px solid #000;
margin-bottom: 10px;
width: 93%;
}
<div class="test2">
remove link
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
or
.test2 {
margin-bottom: 30px;
width:93%;
text-align:right;
}
.test1 {
border: 1px solid #000;
margin-bottom: 10px;
width: 93%;
}
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
I would try nesting your code in a container and use display: flex; with flex-direction: column;
.test2 {
float: right;
}
.test1 {
border: 1px solid #000;
margin-bottom: 10px;
width: 93%;
}
.container {
display: flex;
flex-direction: column;
}
<div class="container">
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
</div>
Another option would be to set display: flex; on test right a flex-direction: row; then you can can set test2 to width: 7%; while test still takes up 93%. Finally, you can space them by adding gap Check the snippet below.
.test2 {
width: 7%;
}
.test1 {
border: 1px solid #000;
margin-bottom: 10px;
width: 93%;
}
.test {
display: flex;
flex-direction: row;
width: 100%;
gap: 10px;
}
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
<div class="test">
<div class="test1">
some content
</div>
<div class="test2">
remove link
</div>
</div>
Just add display: flex; justify-content: flex-end to your test2 class and it will work.enter image description here
I want to align a label, a text-input and an X sign next to each other using Bootstrap 4.
I managed to align the label and text-input but can't seem to do that with the X sign.
JSFiddle: https://jsfiddle.net/jptyuv5n/
How can we align that X sign next to the input field? What am I missing here?
.collection {
display: flex;
}
.collection img {
float: left;
width: 150px;
}
.collection .form {
display: inline-block;
width: 100%;
margin: 0px 15px;
}
.collection .form input {
display: inline-block;
width: 100%;
}
<div class="row">
<div class="col-6 collection">
<img src="https://via.placeholder.com/150/771796">
<div class="form">
<label>Text</label>
<input type="text" name="text1">
<span>X</span>
</div>
</div>
<div class="col-6 collection">
<img src="https://via.placeholder.com/150/771796">
<div class="form">
<label>Text</label>
<input type="text" name="text2">
<span>X</span>
</div>
</div>
</div>
Edit: I just saw in your question that you mentioned Bootstrap 4. Same result can be achieved with using bootstrap styles and 0 css lines from you.
The classes used in the snippet below are documented here: https://getbootstrap.com/docs/4.0/components/forms/#overview
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-12 collection">
<div class="row">
<div class="col-3">
<img src="https://via.placeholder.com/150/771796">
</div>
<div class="col-9">
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label>text</label>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-append">
<div class="input-group-text">X</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Old answer:
You can wrap the <input> and the <span> holding x in a div and use flex on it.
.collection {
display: flex;
}
.collection img {
float: left;
width: 150px;
}
.collection .form {
display: inline-block;
width: 100%;
margin: 0px 15px;
flex-direction: column; /* <- changed flex direction of form */
}
.collection .form input {
display: inline-block;
width: 100%;
}
.input-with-x { /* <- new classes added */
display: flex;
}
<div class="row">
<div class="col-6 collection">
<img src="https://via.placeholder.com/150/771796">
<div class="form">
<label>Text</label>
<div class="input-with-x"> <!-- <- new class used -->
<input type="text" name="text2">
<span>X</span>
</div>
</div>
</div>
</div>
I found strange case. when I use html like that :
<div class="card" style="display:inline-flex; overflow:hidden;">
<div style="display: block; width:10em; height: 5em;">
<div style="display:flex;">
<!-- here -->
<div style="padding-bottom: 10em;"></div>
</div>
</div>
</div>
The div padding-bottom:10em push out others div.card blow the div.card like the padding is some invisible part of the div.card
When I change the internal flex div to block div the bug disapear
It look like the internal flex as it own layout that breach out from the blok and the outer inline-flex
How I prevent that, and make the div with the padding cut out like normal content into overflow hidden element.
It can be I found new bug in chrome flex model ?
Live example :
https://uvzoo.csb.app/
Codesendbox: https://codesandbox.io/s/zen-engelbart-uvzoo
div {
outline: 1px solid pink;
padding: 0.5em;
margin: 0.3em;
}
<div style="display: block; width:30em; height: 40em; padding: 1em;">
<!-- block card -->
<div style="display:inline-flex; overflow:hidden;">
<div style="display: block; width:10em; height: 5em;">
<div style="display:flex;">
<div style="padding-bottom: 10em;"></div>
</div>
</div>
</div>
<!-- end block card -->
<!-- block card -->
<div style="display:inline-flex; overflow:hidden;">
<div style="display: block; width:10em; height: 5em;">
<div style="display:flex;">
<div style="padding-bottom: 10em;"></div>
</div>
</div>
</div>
<!-- end block card -->
<!-- block card -->
<div style="display:inline-flex; overflow:hidden;">
<div style="display: block; width:10em; height: 5em;">
<div style="display:flex;">
<div style="padding-bottom: 10em;"></div>
</div>
</div>
</div>
<!-- end block card -->
<!-- block card -->
<div style="display:inline-flex; overflow:hidden;">
<div style="display: block; width:10em; height: 5em;">
<div style="display:flex;">
<div style="padding-bottom: 10em;"></div>
</div>
</div>
</div>
<!-- end block card -->
<!-- block card -->
<div style="display:inline-flex; overflow:hidden;">
<div style="display: block; width:10em; height: 5em;">
<div style="display:flex;">
<div style="padding-bottom: 10em;"></div>
</div>
</div>
</div>
<!-- end block card -->
</div>
Adding vertical-align:top fixes the issue. I don't know exactly why but it seems there is a complex calculation that is affecting the baseline calculation of each box making it outside and far from the bottom. Since baseline is the default alignment, you are getting this strange result
div {
outline: 1px solid pink;
padding: 0.5em;
}
.box {
display: inline-flex;
vertical-align:top;
overflow: hidden;
}
.box>div {
display: block;
width: 10em;
height: 5em;
}
.box>div>div {
display: flex;
}
.box>div>div>div {
padding-bottom: 10em;
}
<div style="display: block; width:30em; height: 40em; padding: 1em;">
<!-- block card -->
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
If we add some text we can notice this:
div {
outline: 1px solid pink;
padding: 0.5em;
}
.box {
display: inline-flex;
overflow: hidden;
}
.box>div {
display: block;
width: 10em;
height: 5em;
}
.box>div>div {
display: flex;
}
.box>div>div>div {
padding-bottom: 10em;
}
<div style="display: block; padding: 1em;">
<!-- block card -->
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div> some text here
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
</div> some text here
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
I have the following part. I already tried to do it, but so far without any success.
.container {
width: 600px;
}
.row {
margin-bottom: 10px;
}
.item {
width: 100%;
border: 1px solid silver;
margin-bottom: 0;
display: flex;
justify-content: space-between;
min-height: 60px;
flex: 1 1 0;
}
.item > .selector {
display: flex;
align-items: center;
padding-left: 20px;
}
.item > .label-text {
background-color: silver;
color: white;
padding: 0 10px;
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 1</span>
</div>
<span class="label-text">Small Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 2</span>
</div>
<span class="label-text">longer Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 3</span>
</div>
<span class="label-text">Soo long Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 4</span>
</div>
<span class="label-text">Text</span>
</label>
</div>
</div>
</div>
Sadly I'm not able to modify the structure. There are sooo much JS using the structure. But I can edit the CSS. I'm absolutely not experienced with flex box.
The text in the span.label-text elements can be any long but can't be longer than the half of it's parent width.
Its a plugin and its used in many parts. I can't just define a fix width.
Is it possible to make all span.label-text elements as wide as the one with the longest text without modifying the html or using JS for it?
Here is jQuery example with check label-text max width in all items and apply width to all label-text.
var width =0
jQuery('.item').each(function() {
if(width <= jQuery(this).children(".label-text").outerWidth())
{
width = jQuery(this).children(".label-text").outerWidth();
}
});
jQuery(".label-text").css('width',Math.ceil(width));
body { margin:0; padding:0;}
.container {
width: 600px;
}
.row {
margin-bottom: 10px;
}
.item {
width: 100%;
border: 1px solid silver;
margin-bottom: 0;
display: flex;
justify-content: space-between;
min-height: 60px;
flex: 1 1 0;
}
.item > .selector {
display: flex;
align-items: center;
padding-left: 20px;
}
.item > .label-text {
background-color: silver;
color: white;
padding: 0 10px;
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 1</span>
</div>
<span class="label-text">Small Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 2</span>
</div>
<span class="label-text">longer Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 3</span>
</div>
<span class="label-text">Soo long Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 4</span>
</div>
<span class="label-text">Text</span>
</label>
</div>
</div>
</div>
Since you're using Flexbox, you can play around with the flex values of both flex-items of the .item element, e.g.:
.container {
width: 600px;
}
.row {
margin-bottom: 10px;
}
.item {
width: 100%;
border: 1px solid silver;
margin-bottom: 0;
display: flex;
justify-content: space-between;
min-height: 60px;
flex: 1 1 0;
}
.item > .selector {
display: flex;
flex: 2; /* added; makes it twice as wide as the .label-text */
align-items: center;
padding-left: 20px;
}
.item > .label-text {
background-color: silver;
color: white;
padding: 0 10px;
display: flex;
flex: 1; /* added */
align-items: center;
justify-content: center; /* added */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 1</span>
</div>
<span class="label-text">Small Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 2</span>
</div>
<span class="label-text">longer Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 3</span>
</div>
<span class="label-text">Soo long Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 4</span>
</div>
<span class="label-text">Text</span>
</label>
</div>
</div>
</div>
You can define a width for that label-text.
.container {
width: 600px;
}
.label-text {
width: 150px;
}
.row {
margin-bottom: 10px;
}
.item {
width: 100%;
border: 1px solid silver;
margin-bottom: 0;
display: flex;
justify-content: space-between;
min-height: 60px;
flex: 1 1 0;
}
.item > .selector {
display: flex;
align-items: center;
padding-left: 20px;
}
.item > .label-text {
background-color: silver;
color: white;
padding: 0 10px;
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 1</span>
</div>
<span class="label-text">Small Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 2</span>
</div>
<span class="label-text">longer Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 3</span>
</div>
<span class="label-text">Soo long Text</span>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-7 col-xs-12">
<label class="item">
<div class="selector">
<input type="radio" />
<span>Option 4</span>
</div>
<span class="label-text">Text</span>
</label>
</div>
</div>
</div>
I am trying to align the text "address" in left div vertically. But i am unable to.
Here is the code,
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row">
<!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>
What am i doing wrong. I am using bootsrap 3.
Plunker: https://plnkr.co/edit/cu4ZJVSp3jYTyBwz4NKB?p=preview (View Plunker in full screen)
I am trying to have result similar to this. The coloured borders are only for representation .
You are setting the styles to the center div, instead it should be the label inside the center div
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>
you can add this code in your CSS file to get vertical-align.
but first, you have to add a new class with row class
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="script.js"></script>
<style>
.vertical > div {
display: table-cell;
vertical-align: middle;
float: none;
}
.vertical > div {
display: table-cell;
vertical-align: middle;
float: none;
}
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre label{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
padding:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row vertical">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div><!--row end-->
</div>
</body>
</html>
Here's a solution setting top margin/padding on columns not nested then cancelling top margin/padding in nested ones:
Plunkr
Relevant CSS:
[class*="col-"] {
border: 1px solid black;
padding: 10px;
}
.row:first-child [class*="col-"] {
margin-top: 10px;
background-color: lightgreen;
}
.row .row:first-child [class*="col-"] {
margin-top: -10px;
background-color: pink;
}
.row .row:not(:first-child) [class*="col-"] {
margin-top: 0;
background-color: lightblue;
}
Solution by #codegeek which avoids these problems is better imho :)
Code Pen
You can remove the offset and match it up to 12-grid system.
div.row {
border: 1px solid black;
padding: 10px;
}
.centre {
background: yellow;
top: 60px;
border: 1px solid blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-3 centre">
<label>Address</label>
</div>
<div class="col-xs-8 col-sm-offset-1" style="border:1px solid green">
<!--You can remove style and remove offset and change it to sm-9 -->
<div class="row">
<!--nested row one-->
<div class="col-xs-6">
<label>Street</label>
</div>
<div class="col-xs-6">
<input name="stname">
</div>
</div>
<div class="row">
<!--nested row two-->
<div class="col-xs-6">
<label>Landmark</label>
</div>
<div class="col-xs-6">
<input name="lmark">
</div>
</div>
<div class="row">
<!--nested row three-->
<div class="col-xs-6">
<label>Zip code</label>
</div>
<div class="col-xs-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
<!--row end-->
</div>
As for now, margin-top is a worth option trying.
I positioned the left div by using top: 50%(takes the height of the parent) and then using translateY, which takes the height of the current element.
Since relative positioning didnt take % values, I have used absolute.
But giving absolute makes the div come out of the document flow, hence used "left" for the right sibling with the width of the left sibling.
.parent{
position: relative;
}
.centre{
background: yellow;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.right{
left: 25%;
/* width of left sibling, since col-md-3 is 25%*/
background: lightgreen;
}
Plnkr Link(with bootstrap) or JsFiddle (without Bootstrap)
Result:
Your vertical-align:middle doesn't work, because elements with display: block cannot be centered that way. An easy alternative would be to use display: flex.
Here is a snippet to demonstrate the way display:flex can be used to center pretty much everything:
div.row div{
border: 1px solid black;
padding: 10px;
}
.centre{
display: block;
text-align: center;
vertical-align: middle;
background: yellow;
height: 100%;
}
.flex {
display: flex;
align-items: center;
}
<div class="container-fluid">
<div class="row">
<div class="flex">
<div class="col-md-3 centre">
<label>Address</label>
</div>
<div class="col-md-6">
<div class="row"><!--nested row one-->
<div class="col-md-6">
<label>Street</label>
</div>
<div class="col-md-6">
<input name="stname">
</div>
</div>
<div class="row"><!--nested row two-->
<div class="col-md-6">
<label>Landmark</label>
</div>
<div class="col-md-6">
<input name="lmark">
</div>
</div>
<div class="row"><!--nested row three-->
<div class="col-md-6">
<label>Zip code</label>
</div>
<div class="col-md-6">
<input name="zipcode">
</div>
</div>
</div>
</div>
</div><!--row end-->
</div>
EDIT: maybe this guide might be of interest for you:
Centering in CSS: A Complete Guide