I tried the following to vertically align text in a div (fiddle):
<div class="container-fluid">
<div class="row">
<div class="col-xs-2">
This should not be vertically centered
</div>
<div class="col-xs-2" style="display: table-cell; vertical-align: middle;">
This should be vertically centered
</div>
</div>
</div>
However, the text remains top-aligned! What am I doing wrong?
(Note: this is not a duplicate, because the duplicate questions for this issue all recommend the above as the solution: I'm asking why the solution isn't working for me).
It is top aligned, but unless you change the height it will look the same as middle or bottom aligned.
What you have now, but with background colors added to the divs:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2" style="background: #bbb;">
This should not be vertically centered
</div>
<div class="col-xs-2" style="background: #888; display: table-cell; vertical-align: middle;">
This should be vertically centered
</div>
</div>
</div>
What you will see if you give each a height of 50 pixels:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2" style="background: #bbb; height: 50px;">
This should not be vertically centered
</div>
<div class="col-xs-2" style="background: #888; height: 50px; display: table-cell; vertical-align: middle;">
This should be vertically centered
</div>
</div>
</div>
Related
I just started setting up my blog prototype with Bulma. There is a footer section with two equally divided columns.
I'd like the three items (Twitter, Email, etc.) to be vertically centered in the yellow area. Is there any special class for that available in Bulma?
(Please see the full example on codepen.io.)
<footer class="footer" style="background-color: lightpink;">
<div class="columns">
<div class="column has-text-centered-touch" style="background-color: cyan;">
<p>Some copyright stuff...</p>
<p>Templated with Bulma. Published with Hugo.</p>
</div>
<div class="column has-text-right" style="background-color: yellow;">
<div class="level">
<div class="level-left"></div>
<div class="level-right">
<a class="level-item" href="#">Twitter Icon</a>
<a class="level-item" href="#">Email Icon</a>
<a class="level-item" href="#">LinkedIn Icon</a>
</div>
</div>
</div>
</div>
</footer>
You could add the following CSS so the right side column so it is vertically centered.
https://codepen.io/anon/pen/XzmEgr
.footer .has-text-right {
display: flex;
justify-content: center;
}
Make the height of the .level on the right side 100%
.right-side > .level {
height: 100%;
}
JSFiddle
I have an h4 nested in 2 divs like so
<div id="my-team-lineup" style="text-align:center">
<div id="myteamDiv" style="width:100%; ">
<div id="myTeamBeforeDiv" style="width:50%; float: left;">
<center>
<h4>Before Trade</h4>
<div class="tableRow header blue" id="statTable0">
<div class="cell">Pos</div>
<div class="cell">Players</div>
<div class="cell">Opp</div>
<div class="cell">Proj Pts</div>
</div>
<div class="tableRow">
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text
</div>
<div class="cell">
Text</div>
</div>
<br />
<h4>Week At Bottom</h4>
</center>
</div>
</div>
I want to have this h4 sticky to the bottom of the page. I have tried every combination of position and bottom I can think of and nothing is working. Just a note as I have an exact replica of this that takes up the other 50% of the page, and the height of the divs can be different due to content.
First, you didn't closed all divs in your code. correct it.
You can set position as fixed and bottom as 0.
HTML
<h4>text</h4>
CSS
h4{
position: fixed;
bottom: 0;
}
https://jsfiddle.net/xxfhqv36/
I am using Bootstrap 3, I need to have same height of the columns with vertical align able in the content of the columns
<div class="row">
<div class="col-xs-12 col-sm-3">
vertical align top
</div>
<div class="col-xs-12 col-sm-3">
vertical align middle
</div>
<div class="col-xs-6 col-sm-3">
<img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
</div>
<div class="col-xs-6 col-sm-3">
vertical align bottom
</div>
</div>
Please check here https://jsfiddle.net/4d2m74nc/4/
This is achievable but will take away from some of bootstrap's built in functionality. Mainly, the media queries for mobile rendering of the grid system.
The best way to achieve this is probably with the flexbox approach. Demo.
<div class="row row-eq-height">
<div class="col-sm-3">
vertical align top
</div>
<div class="col-sm-3 vcenter">
vertical align middle
</div>
<div class="col-sm-3">
<img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
</div>
<div class="col-sm-3 vbottom">
vertical align bottom
</div>
</div>
CSS
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.vcenter{
display:flex;
flex-direction:column;
justify-content:center;
}
.vbottom{
display:flex;
flex-direction:column;
justify-content:flex-end;
}
Second way is to use absolute positioning for the vertical alignment and flexbox for matching heights.
Check out the demo.
<div class="row row-eq-height">
<div class="col-sm-3">
vertical align top
</div>
<div class="col-sm-3">
<div class="vcenter">
vertical align middle
</div>
</div>
<div class="col-sm-3">
<img src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
</div>
<div class="col-sm-3">
vertical align bottom
</div>
</div>
CSS
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.vcenter {
position: absolute;
top: 50%;
}
Another option would be to use JavaScript to fix the heights and vertical align for you. You could use matchHeight.js.
It's fairly simple to use. You just wrap all of your column content that you want to match in height with another <div> with the class .box
<div class="row">
<div class="col-md-4">
<div class="box">
Content
</div>
</div>
<div class="col-md-4">
<div class="box">
Content
</div>
</div>
<div class="col-md-4">
<div class="box">
Content
</div>
</div>
</div>
and then instantiate it on document load in your JavaScript file or <script></script> tags after your JQuery link.
$('.box').matchHeight();
Sticking with JavaScript for the vertical align you could add .vcenter to the .box element you want vertically aligned and do something like:
var height = $('.vcenter').height();
$('.vcenter').css('margin-top', (height/2));
$('.vcenter').css('margin-bottom', -(height/2));
var $window = $(window);
var windowsize = $window.width();
function checkWidth(){
if (windowsize < 440) {
$('.vcenter').removeAttr("style");
}
}
$(window).resize(checkWidth);
Which calculates the height of the .box and then divides by 2 to determine a top and bottom margin for the content. We then determine the width of the window and on resize we remove the margins. This part is untested but I believe will work in theory. Here's a demo of matchHeight.js. And here's a useful blog on column height matching in bootstrap.
The last two approaches to vertical alignment are poor but should work.
<div class="row flex-container">
<div class="col-xs-12 flex-item col-sm-3">
vertical align top
</div>
<div class="col-xs-12 flex-item col-sm-3">
vertical align middle
</div>
<img class="col-xs-6 flex-item col-sm-3" src="http://mspmentor.net/site-files/mspmentor.net/files/archive/mspmentor.net/wp-content/uploads/2009/10/free_managed_services.jpg" />
<div class="col-xs-6 flex-item col-sm-3">
vertical align bottom
</div>
</div>
CSS that support the boxes the flex item properties it just give for your understanding
.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
border: 1px solid #000;
padding: 20px;
}
When using the bootstrap grid, the vertical spaces and the most left & right are 15px but the spaces between the columns are double: 30px.
Is there a way to make them also 15px without changing Bootstrap CSS?
It's very easy to change the gutter without affecting the core bootstrap.css and still be able to use the same classes to push pull and offset.
Just make sure your .row around the new gutters has negative left and right margin equal to the padding on the left and right of the columns. Just like all floated elements this grid, like the Bootstrap grid, is exactly the same and will still require no more than 12 columns per row, if exceeded all heights need to be equal or you will need to clear them or use some other means such as jQuery or making them all the same height.
There is no vertical spacing on the grid, any vertical spacing comes from the children inside the column and it's usually the bottom margin value.
https://jsbin.com/wonuni/1/
CSS
.row.grid-15-gutter {
margin-left: -7.5px;
margin-right: -7.5px;
}
.row.grid-15-gutter [class*="col-"] {
padding-left: 7.5px;
padding-right: 7.5px;
}
.panel {
border: 1px solid red;
padding: 10px;
margin-bottom: 15px;
}
HTML
<div class="container">
<h2>Modified Grid</h2>
<div class="row grid-15-gutter">
<div class="col-sm-5">
<div class="panel">1</div>
</div>
<div class="col-sm-7">
<div class="panel">2</div>
</div>
</div>
<div class="row grid-15-gutter">
<div class="col-sm-5">
<div class="panel">1</div>
</div>
<div class="col-sm-7">
<div class="panel">3</div>
</div>
</div>
<hr>
<h2>Regular Grid</h2>
<div class="row">
<div class="col-sm-5">
<div class="panel">1</div>
</div>
<div class="col-sm-7">
<div class="panel">2</div>
</div>
</div>
<div class="row">
<div class="col-sm-5">
<div class="panel">1</div>
</div>
<div class="col-sm-7">
<div class="panel">3</div>
</div>
</div>
</div>
I'm looking for the best way to create a block of left-aligned text and a block of right aligned text inside a div.
This is an image of what I want it to look like
I've thought about creating three divs with one in the middle acting as a buffer, but it doesn't seem to work. I'd need to hard code the length of the middle div, and this doesn't seem like the best approach
<div style="width: 500px;">
<div style="float: left;">left aligned text</div>
<div style="float: left; width: 100%" > </div>
<div style="float: left;">right aligned text </div>
</div>
Why not use the "text-align" property on the second div?
<div style="width: 500px;">
<div style="float: left;">left aligned text</div>
<div style="float: right; text-align: right;">right aligned text </div>
</div>
EDIT: You don't need a middle DIV for a spacing. You can simple use a percentage width for the two other DIVs and using float left and right you have a "buffer":
<div style="width: 500px;">
<div style="float: left; width: 45%;">left aligned text</div>
<div style="float: right; text-align: right; width: 45%;">right aligned text </div>
</div>
try this -
<div style="width: 500px;">
<div style="float:left">left aligned text</div>
<div style="text-align: right;">right aligned text </div>
</div>