I am trying to vertically align and I can not find the solution. I have read so many stack overflow questions and I am not sure what I am doing wrong. Here is my HTML:
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<form class="order-form">
<div class="row first-row">
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order 123456789</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order Date: 8/28/18</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order Status: OP</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Ready Status: RD</span>
</div>
<div class="col-xs-12 col-sm-4 v-middle">
<span>Facility 123 Dudley Chip-N-Saw</span>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
and here is my SCSS:
$font-family: "roboto", "open-sans";
body {
font-family: $font-family;
padding-top: 5%;
.order-form {
text-align: center;
position: relative;
display: block;
label {
display: block;
}
.first-row {
font-size: 16px;
.v-middle {
display: inline-block;
vertical-align: middle;
}
}
}
}
I a using Bootstrap v3 so I can not use the alignment classes Bootstrap 4 provides. I am not sure what else is required for vertical align besides display being inline. I know vertical alignments do not work on block level items. Please help Thanks!
Here is my codepen: https://codepen.io/sazad/pen/BOZWOV
but Please shrink screen to make sure when the line breaks the text is vertically aligned middle. Thanks!
Your .v-middle elements inherit float from the col-.. elements, thats why you can't vertically align them. Simply add float: none to that class to fix it.
You will also have a problem with whitespaces in-between display: inline-block elements. A lot of ways to fix those, my favourite fix for those is adding font-size: 0 to parent.
Final code:
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<form class="order-form">
<div class="row first-row">
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order 123456789</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order Date: 8/28/18</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Order Status: OP</span>
</div>
<div class="col-xs-12 col-sm-2 v-middle">
<span>Ready Status: RD</span>
</div>
<div class="col-xs-12 col-sm-4 v-middle">
<span>Facility 123 Dudley Chip-N-Saw</span>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
$font-family: "roboto", "open-sans";
body {
font-family: $font-family;
padding-top: 5%;
.order-form {
text-align: center;
position: relative;
display: block;
label {
display: block;
}
.first-row {
font-size: 0;
.v-middle {
display: inline-block;
vertical-align: middle;
float: none;
font-size: 16px;
}
}
}
}
Also a small suggestion. Don't nest selectors that heavily (for ex. order-form doesn't need to be nested inside body).
Related
I am having a doubt with the grid system, it's easy but I'm struggling for the moment, lets say that I need to do a correct implementation for the grid of bootstrap, What I'm trying to do with bootstrap is doing this example:
So I thought that it's very easy to do, but for some reason I'm not in the correct way or maybe yes, because with the next code:
<div class="container bank-payment">
<div class="row">
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
</div>
<div class="row bank-payment">
<div class="col-xs-6 col-md-2 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
<div class="col-xs-6 col-md-2 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
<div class="col-xs-6 col-md-2 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
<div class="col-xs-6 col-md-2 image-bank">
<img src="http://via.placeholder.com/90x28">
</div>
</div>
</div>
I'm having this results:
The thing is... the first one is for me the correct because it meets the condition of standards but the space between them is very long, I need to put in 8px in space for every image from right/left and bottom, but the second row meets the condition too to reduce the space but it doesn't meet the standard... so how I can solve this part ???
and here my css code:
.bank-payment {
text-align: center;
.image-bank {
//margin-bottom: 8px;
margin-top: 8px;
//margin-right: 8px;
vertical-align: middle;
display: inline-block;
}
}
These 2 parts of Bootstrap grid system will solve your problem:
https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment
https://v4-alpha.getbootstrap.com/layout/grid/#offsetting-columns
here you can take an example of how set the position of each column.
and probably you wont need the Display: inline-block, because the bootstrap grid system already have his way to display it correctly. If you really need an example, just let me know, but I think the links above will get it for you.
EDIT
It was really hard to make it exactly like you expected in Bootstrap, so I created my own classes, see if it helps you:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<style>
#media (max-width: 768px) {
.center-content {
display: block;
margin: auto;
width: 420px;
}
.col-md-2_6 {
flex: 0 0 50%;
max-width: 50%;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 5px;
}
.devices-disappear {
display: none;
width: 0;
height: 0;
}
}
#media (min-width: 769px) {
.coloriz-margin {
min-height: 28px;
min-width: 90px;
font-size: 16px;
}
.coloriz {
border: 1px solid black;
min-height: 28px;
min-width: 90px;
font-size: 16px;
}
img {
display: block;
margin: auto;
height: 28px;
width: 90px;
}
.center-content {
display: block;
margin: auto;
width: 640px;
}
.col-md-2_6 {
flex: 0 0 20%;
max-width: 20%;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 5px;
}
}
</style>
</head>
<body>
<div class="center-content">
<div class="row">
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="devices-disappear col-md-2_6 coloriz-margin"><!-- let empty to occupy the white space--></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
<div class="devices-disappear col-md-2_6 coloriz-margin"><!-- let empty to occupy the white space--></div>
</div>
</div>
</body>
this make the columns use the right size. Keep in mind that I used the latest Bootstrap (4.0 beta)
To get the logos to fill the space of the column, use the class "img-responsive". It will remove the long spacing. The only issue, is that the logos will appear very large if you are using the container class with a width of 1200px or min-width of 1200px. So a better solution, is putting the row columns inside another row column with three "col-md-4" columns. Just add your logo box to the middle.
<div class="container bank-payment">
<div class="row">
<div class="hidden-xs col-md-4">
</div>
<div class="col-xs-12 col-md-4">
<div class="row">
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28" class="img-responsive" >
</div>
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28" class="img-responsive" >
</div>
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28" class="img-responsive" >
</div>
<div class="col-xs-6 col-md-3 image-bank">
<img src="http://via.placeholder.com/90x28" class="img-responsive" >
</div>
</div>
</div>
<div class="hidden-xs col-md-4">
</div>
</div>
</div>
I'm not a big fan of bootstrap especially when it comes to the grid system. Flexbox works much better, and is a little dryer code.
.bank-payment {
display: flex;
max-width: 490px;
flex-wrap: wrap;
justify-content: center;
}
.image-bank {
margin: 8px 4px;
}
I know you were asking specifically about bootstrap, but to get your desired outcome, and do less to keep it responsive. Remove the bootstrap classes and rows to avoid confusion.
I tried various different methods to no avail, including using text-align: center; on the <div> and display: inline-block; on the <p> and <h4>. Since the I have 3 different text tags inside the div I'm trying to align this only makes the text look centered and not aligned to the left.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.media-body {text-align: center;}
p {display: inline-block}
h4 {display: inline-block;}
<div id="j2" class="jumbotron">
<div class="container">
<div class="row">
<div id="block" class="col-sm-8 col-sm-offset-2">
<div class="media-body">
<p id="time">10:00 A.M.</p>
<h4 class="media-heading"><b>Meet & Greet</b></h4>
<p>Nametags, Swag, Refreshments</p>
</div>
</div>
</div>
</div>
</div>
This is the usual solution:
#block {
text-align: center;
}
.media-body {
display: inline-block;
text-align: left;
}
<div id="block">
<div class="media-body">
<p id="time">10:00 A.M.</p>
<h4 class="media-heading"><b>Meet & Greet</b></h4>
<p>Nametags, Swag, Refreshments</p>
</div>
</div>
But Bootstrap sets the property width: 10000px; to the .media-body class. Therefore, you need to redefine this property as width: auto;:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#block {
text-align: center;
}
.media-body {
display: inline-block;
text-align: left;
width: auto;
}
<div id="j2" class="jumbotron">
<div class="container">
<div class="row">
<div id="block" class="col-sm-8 col-sm-offset-2">
<div class="media-body">
<p id="time">10:00 A.M.</p>
<h4 class="media-heading"><b>Meet & Greet</b></h4>
<p>Nametags, Swag, Refreshments</p>
</div>
</div>
</div>
</div>
</div>
I have tried different ways to align contents inside div :
1) table and table cell but it acts weirdly with width
2) I have padding which wont align properly with for every content because data differ.
Note : My actual code is inside ng-repeat
HTMl :
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="offer-horizontal col-sm-6 col-md-6">
<div class="col-sm-6 col-md-6 offer-logo-div-horizontal" >
<img src="https://icon.uiowa.edu/help/wp-content/uploads/2014/07/ICON_logo_only.png" alt="nothing" style="height:20px;width:50px;" class="offer-logo-horizontal">
</div>
<div class="col-sm-6 col-md-6">
<span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
<p>Some really large label that will wrap to multiple lines in small screens</p>
<div>
<button>
shop now
</button>
</div>
</div>
</div>
<div class="offer-horizontal col-sm-6 col-md-6 ">
<div class="col-sm-6 col-md-6 offer-logo-div-horizontal" style="text-align:center;">
<img src="http://www.iconplc.com/icon-files/images/image-bank-component/other/icon-logo.jpg" style="height:20px;width:50px;" class="offer-logo-horizontal">
</div>
<div class="col-sm-6 col-md-6">
<span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
<p>Some really large label that wil</p>
<div>
<button>
shop now
</button>
</div>
</div>
</div>
<div class="offer-horizontal col-sm-6 col-md-6">
<div class="col-sm-6 col-md-6 offer-logo-div-horizontal" style="text-align:center;">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9e/Icons_logo_normal.jpg" alt="nothing" style="height:20px;width:50px;" class="offer-logo-horizontal">
</div>
<div class="col-sm-6 col-md-6">
<span class="offer-description-horizontal" ng-bind-html="offer.description | words:15"></span>
<p>Some really large </p>
<div>
<button>
shop now
</button>
</div>
</div>
</div>
</div>
</div>
</div>
CSS :
.offer-horizontal {
min-height: 194px;
background-color: #EEF0F1;
border: 5px solid #fff;
text-align:center;
}
.offer-logo-div-horizontal {
min-height: 194px;
text-align: center;
}
.offer-logo-horizontal {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
JSFiddle
My Question : How content I make data inside div vertically align.
Any help is appreciated.
Depending on your browser support, flexbox will achieve this:
Browser support: http://caniuse.com/#feat=flexbox
JSFiddle:
http://jsfiddle.net/22xvnjd5/4/
I've added the following rules to your code:
.offer-horizontal {
padding-bottom:20px; /* Tidy up the spacing on smaller screens */
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
}
Not necessary for alignment, but I also adjusted the image min-height as it caused a massive gap on smaller screens!
.offer-logo-div-horizontal {
min-height: 90px;
}
#media (min-width: 768px) {
.offer-horizontal {
min-height:194px;
}
}
I am having problem with the bootstrap rows, where I am getting more white space at top and bottom of the rows, which I need to remove, I want the row to have just the height of the text present inside it...
HTML is given below :
<div class="row">
<div class="col-sm-6 text-muted">
<p>Author</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>abcd</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>Date Created</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Nov 28, 19:30</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>File Type</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Microsoft Word</p>
</div>
</div>
<div class="row row-divider"></div>
<div class="row">
<div class="col-sm-6 text-muted">
<p>Last Modified</p>
</div>
<div class="col-sm-6 text-right font-bold">
<p>Dec 08, 11:00</p>
</div>
</div>
All you need to do is add the following CSS to your code:
.row-divider {
height: 1px;
margin: 0px;
overflow: hidden;
background-color: #e7eaec;
}
p {
margin: 0;
padding: 0;
line-height: 1;
}
You basically tell all your paragraphs to have 0 margins so the line height is equal to the text height.
On a different note, you might want to use text-muted class on the <p> tags instead of the whole <div> that contains those <p> tags. Why? because for example tomorrow you will add two more lines to that div that wouldn't need to be text-muted, you would need to define a new class to cancel those values.
Style the things you need and only those.
If you want the left text and right text on the same line in Jsfiddle just change the col-sm-x class to col-xs-x class, basically, jsfiddle view is a bit small and that's why you see two lines.
You have to set:
p{
margin: 0;
line-height: 14px; /*you can reduce this value to achieve what you want*/
}
Here a JSFiddle example to play with
Note that .row-divider has margin: 9px 0px if you want you can reduce it to closer to the text above it.
Check this out for more information about line-height http://www.w3schools.com/cssref/pr_dim_line-height.asp
p{
margin: 5px 0px;
}
.clearfix {
zoom: 1;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
use clearfix class with row.
I am trying to expand the height of first three col-md-1 divs to the rows maximum height which is expanded by two col-md-5, and also vertically align its contents. I am using grid system from bootstrap.
<div class="row load-container">
<div class="col-md-1">{{Id}}</div>
<div class="col-md-1"><img src="images/{{statusIcon Status}}" /></div>
<div class="col-md-1"><div class="info-bubble info-bubble-small middle-align {{statusClass}}">{{Class}}</div></div>
<div class="col-md-5 container">
<div class="row">{{From.Name}}</div>
<div class="row">{{From.City}} {{From.State}}, {{From.Zip}}</div>
<div class="row">{{pickupFormatted}}</div>
</div>
<div class="col-md-5 container">
<div class="row">{{To.Name}}</div>
<div class="row">{{To.City}} {{To.State}}, {{To.Zip}}</div>
<div class="row">{{deliveryFormatted}}</div>
<div class="row">{{expectedFormatted}}</div>
</div>
<div class="col-md-1">
{{Weight}}
</div>
<div class="col-md-2">
{{Distance.text}}
</div>
<div class="col-md-2">
{{Duration.text}}
</div>
<div class="col-md-4">
</div>
</div>
Edit:
Here is the method the sort-of works, except that the column widths are no longer affecting actual width.
.load-container {
padding: 5px;
display: table;
width: 100%;
}
.load-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
text-align: left;
}
Ninja-edit:
This seems to work now
.load-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
}