I have 3 divs next to each other using a grid.
All the divs (the columns) are inline-blocks. I added 3 classes to control the vertical alignment of the divs (vtop, vmiddle, vbottom). The problem is, that vtop and vbottom work fine, but vmiddle shows no action.
<div class="container">
<div class="row">
<div class="col-desktop-4 vmiddle">
COLUMN 1<br/>
Line 1
</div>
<div class="col-desktop-4">
COLUMN 2<br/>
Line 1<br/>
Line 2<br/>
Line 3
</div>
<div class="col-desktop-4 vbottom">
COLUMN 3<br/>
Line 1
</div>
</div>
Do you have any idea why this is not working?
JSFiddle: http://jsfiddle.net/marcbaur/5rg0rs3v/7/
Greets
Marc
See: http://jsfiddle.net/5rg0rs3v/13/
First you should compile your less code into CSS.
Why the vertical alignment won't work will be explained among others at http://phrogz.net/css/vertical-align/ an solution can be found at: http://css-tricks.com/centering-in-the-unknown/
Firstly wrap you content in a additional div:
<div class="col-desktop-4 vmiddle"><div>
COLUMN 1<br/>
Line 1</div>
</div>
And than apply the css code like that shown below:
.vmiddle:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.vmiddle {
display: inline-block;
vertical-align: middle;
}
Related
I have a React app where I have a header, container and footer. For animation purpose of route loading, I have to use position: absolute on the page rendering part of the container.
The container has a row and 2 columns. One for menu and other is the place where pages are rendered.
Now the problem is since Container second column is position: absolute footer goes below to the highest column.
Is there any way to make both columns inside row to have the same height? I am using Bootstrap 4.Any other suggestion is appreciated.
<header>..</header>
<div class="row">
<div class="col-4">
</div>
<div class="col-8"> //This is positioned absolute
<div class="page"><div> // class that applies position
</div>
</div>
<footer>..<footer> //footer goes below any column whichever has more height.
Edit:
CSS:
.page {
position: absolute;
left: 0;
right: 0;
}
All other classes are Bootstrap.
You can see the issue if you can log in to the below app with any email and any password.
https://healthrecordstack.now.sh/
As in the picture below, the footer overlaps the content. Footer sits just below the menu column as the content column is given a position absolute.
.row
{
display:flex;
min-height:80vh;
}
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You should use table as below example:
.table-row{display: table; table-layout: fixed; }
.table-col{display: table-cell; float: none; vertical-align: top; }
<header>..</header>
<div class="row">
<div class="table-row">
<div class="col-4 table-col"> </div>
<div class="col-8 table-col"> //This is positioned absolute ......
</div>
</div>
</div>
<footer>..<footer>
I am trying to have an image sitting next to some text. The text needs to sit halfway vertically on the image
[IMG]
[IMG] Here is the text
[IMG]
I am getting the following, because the two cell divs are equal width, instead of matching content width:
[IMG]
[IMG] Here is the text
[IMG]
The code is preexisting. There is a table container div:
.vertical-align-container {
display: table;
table-layout: auto;
width: 100%;
}
And two table cell divs:
.vertical-align-child {
display: table-cell;
vertical-align: middle;
padding-left: 15px;
}
So no matter what I do, the table cells are equal width. How can I get the first to match content width, and the second to fill the remainder of the container?
HTML:
<div class="vertical-align-container">
<div class="vertical-align-child" style="padding-left: 0;">
<img src="path/img.png">
</div>
<div class="vertical-align-child">
<p>Here is the text</p>
</div>
</div>
As you can see, I've tried a couple things, but what I've included here is table-layout, which I though was supposed to do exactly this?
I think you could approach this with flexbox.
You can use the align-items property for vertical centering.
.container,
.text {
display: flex;
}
.text {
align-items: center;
padding-left: 1rem;
}
.image img {
display: block;
width: 100%;
height: auto;
}
<div class="container">
<div class="image">
<img src="https://unsplash.it/200">
</div>
</div>
<div class="container">
<div class="image">
<img src="https://unsplash.it/200">
</div>
<div div class="text">
<p>
Here is the text
</p>
</div>
</div>
<div class="container">
<div class="image">
<img src="https://unsplash.it/200">
</div>
</div>
Found an ugly workaround for this here:
CSS table column autowidth
The issue I was having was that my image is set to 100% width, while using a max-width of the size I wanted it to stop at. Apparently the table isn't willing to read in the max-width as the content size, so it chose 50%.
I hacked in a width for the image and set the table cell to have nowrap, as in the linked question. It's not by any means a good answer, but it'll do for a quick fix.
Issue is that i am trying to vertically align text within neighboring divs in a bootstrap 3 row where one cell has text of varying size. the text in neighboring cells aligns along the top, but i need it to align along the bottom.
Fiddle of the problem: http://www.bootply.com/GqKdUa9uxT
Yes, i have searched and have surprisingly not found an adequate answer:
vertical-align with Bootstrap 3
does not help for example as i am trying to align the text, not the div.
thanks, airyt
You can align text to the bottom in the right div by using "position:relative" for parent div and "position:absolute" for a child, then you can adjust the position by changing the value of a bottom property according to your need.
The HTML code:
<div class="container">
<div class="row">
<div class="col-sm-6">
Here is some text (Text A) <span style="font-size: 40px">Text B</span>
</div>
<div class="col-sm-6 bottom-align">
This text needs to be (bottom) ed with Text A in previous cell.
</div>
</div>
</div>
and the CSS styling:
.row {
position: relative;
}
.bottom-align {
position: absolute;
bottom: 0px;
right: 0;
border-bottom: 1px solid red;
}
.border{
border-bottom: 1px solid blue;
}
Please check the fiddle:
http://jsfiddle.net/johannesMt/craLuLpb/
You can't vertically align floated wrappers, you need to change it to inline element.
DEMO
.col-sm-6 {
display: inline-block;
vertical-align: bottom;
float: none;
width: 50%;
}
<div class="container">
<div class="row">
<div class="col-sm-6">
Here is some text (Text A) <span style="font-size: 40px">Text B</span>
</div><div class="col-sm-6">
This text needs to be (bottom) aligned with Text A in previous cell.
</div>
</div>
</div>
Don't use .col-sm-6 since this will overwrite bootstrap grid system, give it another name
I use reveal.js and write my slides in Markdown code. Now I want to display my content (text, unordered list of bullet points or even an image) in a classical two-column text layout. I would prefer a solution which may be more complex in initial configuration as long as the actual writing of content in Markdown remains easy.
Since I prefer not to run a local server, I write my markdown within the main HTML file.
Update: As the first answer indicates this should be achieved with CSS. (I updated my question accordingly.) Still, I couldn't find any description how to do it with CSS.
I am using CSS flex, it is working fine.
<style>
.container{
display: flex;
}
.col{
flex: 1;
}
</style>
<div class="container">
<div class="col">
Column 1 Content
</div>
<div class="col">
Column 2 Content
</div>
</div>
UPDATE:
Since pandoc supports fenced div,
::: {.container}
:::: {.col}
Column 1 Content
::::
:::: {.col}
Column 2 Content
::::
:::
For the style, we can either use flex or grid, both work fine.
Using flex
<style>
.container{
display: flex;
}
.col {
flex: 1;
}
</style>
Using grid
<style>
.container{
display: grid;
grid-auto-flow: column;
}
</style>
I created two ID's in an external css file, custom.css, which I attached to my reveal.js file with the field css: custom.css in the YAML header.
#left {
left:-8.33%;
text-align: left;
float: left;
width:50%;
z-index:-10;
}
#right {
left:31.25%;
top: 75px;
float: right;
text-align: right;
z-index:-10;
width:50%;
}
I placed div elements with the right and left ID's in my markdown document to produce a two column layout.
<div id="right">
- You can place two graphs on a slide
- Or two columns of text
- These are all created with div elements
</div>
.multiCol {
display: table;
table-layout: fixed; // don't fudge depending on content
width: 100%;
text-align: left; // matter of taste, makes imho sense
.col {
display: table-cell;
vertical-align: top;
width: 50%;
padding: 2% 0 2% 3%; // some vertical, and between columns
&:first-of-type { padding-left: 0; } // there's nothing before col1
}
}
Put this into your custom theme, i.e. right before
// Theme template ------------------------------
#import "../template/theme";
// ---------------------------------------------
How to use? – easy! And not limited to 2 columns:
<section>
<h3>Doing two-column (this headline still full-width)</h3>
<div class='multiCol'>
<div class='col'>
Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.
</div>
<div class='col'>
Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.
</div>
</div>
And simply more regular full-width text in the following. But hey, there is also:
<div class='multiCol'>
<div class='col'>Also works for 3 columns...</div>
<div class='col'>...as we can show in...</div>
<div class='col'>...this example here.</div>
</div>
</section>
No float needed
no clearfix needed
size independent (→ only percentages used)
2 columns, 3 columns, 4 columns ...
<table> ist often considered “outdated” (since it got so badly abused for layout purposes in early html days, and still today for html in emails...) but to the contrary at least as a property layout:table it has many legit uses, is often the most simple solution and widely compatible.
The CSS Grid Layout allows very flexible layouts, two-column formats and more complex layouts.
For two columns, the following CSS snippet may be used. It defines two column templates with equal size, each 1 fraction (1fr) of the available width, and a gutter space of 10px between the columns.
.twocolumn {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
text-align: left;
}
It can be used as follows
<section>
<h2>Slide Title</h2>
<div class="twocolumn">
<div>
Column One
</div>
<div>
Column Two
</div>
</div>
</section>
I solved the problem with two floating <div>-Elements:
<section>
<div style="text-align: left; float: left;">
<p data-markdown>- This is my first left element</p>
<p data-markdown>- This is my second left element</p>
<!-- more Elements -->
</div>
<div style="text-align: right; float: right;">
<p data-markdown>- This is my first right element</p>
<p data-markdown>- This is my second rightelement</p>
<!-- more Elements -->
</div>
</section>
I found out, if you want to use markdowns inside the div-container, you have to wrap the elements in p-tags. If you write data-markdown into the parent section-Tag, it will be ignored inside the div
I hope I could help!
I have found the following way to show one element in such a way it seems to be in a column layout
Text going to the right <!-- .element: style="float: right; width: 40%" -->
Text going on the left column <!-- .element: style="width: 40%" -->
But actually it doesn't work with more than one element on the right
I could not understand you completely but I guess you may found the answer in ramnathv post.
---
layout: slide
---
{{{ content }}}
<div class='left' style='float:left;width:{{left.width}}'>
{{{ left.html }}}
</div>
<div class='right' style='float:right;width:{{right.width}}'>
{{{ right.html }}}
</div>
it worked for me
http://twitter.github.com/bootstrap/scaffolding.html
I tried like all combinations:
<div class="row">
<div class="span7 offset5"> box </div>
</div>
or
<div class="container">
<div class="row">
<div class="span7 offset5"> box </div>
</div>
</div>
changed span and offset numbers...
But I cant get a simple box perfectly centered on a page :(
I just want a 6-column-wide box centered...
edit:
did it with
<div class="container">
<div class="row" id="login-container">
<div class="span8 offset2">
box
</div>
</div>
</div>
But the box is too wide, is there any way I can do it with span7 ?
span7 offset2 gives extra padding to the left span7 offset3 extra padding to the right...
Bootstrap's spans are floated to the left. All it takes to center them is override this behavior. I do this by adding this to my stylesheet:
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
If you have this class defined, just add it to the span and you're good to go.
<div class="span7 center"> box </div>
Note that this custom center class must be defined after the bootstrap css. You could use !important but that isn't recommended.
besides shrinking the div itself to the size you want, by reducing span size like so... class="span6 offset3", class="span4 offset4", etc... something as simple as style="text-align: center" on the div could have the effect you're looking for
you can't use span7 with any set offset and get the span centered on the page (Because total spans = 12)
Bootstrap3 has the .center-block class that you can use. It is defined as
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
Documentation here.
If you want to go full-bootstrap (and not the auto left/right way) you need a pattern that will fit within 12 columns e.g. 2 blanks, 8 content, 2 blanks. That's what this setup will do.
It only covers the -md- variants, I tend to snap it to full size for small by adding col-xs-12
<div class="container">
<div class="col-md-8 col-md-offset-2">
box
</div>
</div>
Sounds like you just wanted to center align a single container.
The bootstrap framework might be overcomplicating that one example, you could have just had a standalone div with your own styling, something like:
<div class="login-container">
<!-- Your Login Form -->
</div>
and style:
.login-container {
margin: 0 auto;
width: 400px; /* Whatever exact width you are looking for (not bound by preset bootstrap widths) */
}
That should work fine if you are nested somewhere within a bootstrap .container div.
add the class centercontents
/** Center the contents of the element **/
.centercontents {
text-align: center !important;
}
#ZuhaibAli code kind of work for me but I changed it a little bit:
I created a new class in css
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
then the div become
<div class="center col-md-6"></div>
I added col-md-6 for the width of the div itself which in this situation meant the div is half the size, there are 1 -12 col md in bootstrap.
Follow this guidance https://getbootstrap.com/docs/3.3/css/
Use .center-block
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
wrap the div in a parent div with class row then add style margin:0 auto; to the div
<div class="row">
<div style="margin: 0 auto;">center</div>
</div>