I am trying to vertically align images in a twitter bootstrap used css.
I have a fluid row and 4 span classes span3 within that row. I have used table and table-cell trick but it does not work for me.
here is the sample code.
<div class="row-fluid">
<div class="span3">
<img src="http://bumblesea.com/blog/indie-fashion-design/lou-o-bedlam-flickr-fashion-photographer-300x300.jpg" alt="">
</div>
<div class="span3">
<img src="http://24.media.tumblr.com/tumblr_ku9h6qcBRn1qat5v7o1_500.jpg" alt="">
</div>
<div class="span3">
<img src="http://1.bp.blogspot.com/_KWR_gvxCigs/Ss0lQXRQj7I/AAAAAAAADkg/drrHCuZd8mA/s400/fashion1965-6.jpg" alt="">
</div>
<div class="span3">
<img src="http://www.urbalicious.com/wp-content/uploads/2009/09/givenchy_jakandjil.png" alt="">
</div>
</div>
and the CSS that i have modified is
.row-fluid {
display: table-cell;
}
.span3 {
text-align: center;
display: table-cell;
vertical-align: middle;
float: none;
}
However it works if I use a span12 class and put 4 div inside the span12 using display:table-cell but it breaks the responsive nature so cannot afford this.
I guess here Vertically centering two <div class="span6">'s within Bootstrap is the similar problem but suggestions does not work for me.
you need to use !important to overwrite bootstrap rules, or use heavier selector:
http://jsfiddle.net/HGy7a/
.row-fluid {
display: table!important;
float:none!important;
}
.span3 {
float: none!important;
display: table-cell!important;
vertical-align:middle;
}
Related
What I want to have is two divs side-by-side and within one of them is an image and in the other is two divs, one above the other.
This happens to be a Wordpress theme, but I'm pretty sure this is basic CSS question.
The Wordpress stack exchange told me it was off-topic.
Call the left div #divL and the right div #divR.
I found an answer on SO mentioning that I should set display of #divL and #divR to
inline-block. I can get this to work on a test html file that I created in isolation but it doesn't work in the wordpress header. Specifically the divs in the wordpress header #divL and #divR act as if they had display: block rather than being positioned side-by-side.
Changing them to display: inline does put them side-by-side but then it
doesn't work to stack two divs within #divR.
I'll replicate here some of the code in the Wordpress header. Note that I'm going to simplify this by omitting the stacked divs inside #divR, because the symptom is obvious without that.
the following is what I'm using to try to get #divL and #divR to display side-by-side.
#divL { display: inline-block; }
#divR { display: inline-block; }
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" class="attachment-full size-full">
</div>
<div id="divR">Some text that should go on right</div>
</div>
<nav> .... </nav>
</div>
</header>
But they display one above the other.
Note that this actually does work to get them side-by-side, but then the
stacked divs inside #divR don't work as intended:
#divL { display: inline; }
#divR { display: inline; }
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" class="attachment-full size-full">
</div>
<div id="divR">Some text that should go on right</div>
</div>
<nav> .... </nav>
</div>
</header>
There is a lot of CSS on these other elements but I'm not sure which of it is important to this question so I'll wait for someone to comment and tell me what I should include.
As I wrote in my comment, you should set widths for those ìnline-blocks, that should basically do what you are after.
But as an alternative you can also use display: flex; on the container DIV. This can be done rather simple, but in the snippet below I added some additional settings to define a certain width for the two DIVs and to center the contents in these DIVs both horizontally and vertically (by also making the child elements flexboxes with flex-directon: column. For the rest of the settings see the code below.
.title-area {
display: flex;
justify-content: center;
align-items: stretch;
}
.title-area>* {
width: 40%;
border: 1px solid green;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" src="https://placehold.it/200x150/fa0" class="attachment-full size-full">
</div>
<div id="divR">Some text that should go on right</div>
</div>
<nav> .... </nav>
</div>
</header>
Here's an example of what would work:
<header class="site-header">
<div class="wrap">
<div class="title-area">
<div id="divL">
<img id="logo-img" class="attachment-full size-full" />
</div>
<div id="divR">
<div id="divTR">Some text that should go on top right</div>
<div id="divBR">Some text that should go on bottom right</div>
</div>
</div>
<nav>....</nav>
</div>
</header>
And the CSS:
#divL {
display: inline-block;
width: 49%;
}
#divR {
display: inline-block;
width: 49%;
}
But also Jon P is right; it might be worth your while to investigate one of the newer methods for dynamically spacing and sizing content.
I am creating a simple css chart responsive that works on any browser.
This is my code:
<div style="width:500px;height:300px;">
<div style="width:10%;height:20%;background:#00ffff;float:left;"></div>
<div style="width:10%;height:40%;background:#00ffff;float:left;"></div>
<div style="width:10%;height:80%;background:#00ffff;float:left;"></div>
</div>
But as you can see, the chart is inverted:
http://jsfiddle.net/xkd6twsq/
I tried with:
position:relative;
bottom:0px;
but doesn't work:
http://jsfiddle.net/xkd6twsq/1/
Use display: inline-block instead of float. The parent needs display: table-cell and vertical-align to align graph to bottom.
<style>
div {
display: table-cell;
vertical-align: bottom;
}
div div {
display: inline-block;
width: 10%;
background: #0ff;
}
</style>
<div style="width:500px;height:300px;">
<div style="height:20%;"></div>
<div style="height:40%;"></div>
<div style="height:80%;"></div>
</div>
http://jsfiddle.net/xkd6twsq/4/
The problem is the float:left, using display: inline-block will get what you want:
<div style="width:500px;height:300px;">
<div style="width:10%;height:20%;background:#00ffff;display:inline-block;"></div>
<div style="width:10%;height:40%;background:#00ffff;display:inline-block;"></div>
<div style="width:10%;height:80%;background:#00ffff;display:inline-block;"></div>
</div>
All about floats from CSS-tricks explains when to use floats and this display types answer details why floats are not the best option.
I am using Twitter Bootstrap and its grid layout and in one column I am trying to get an image pulled to the right and a text pulled to the right next to the image as well while they should both be vertically centered. With the image it's easy - I made the class img-responsive and added padding to that column and a pull-right to the image so it sits well, however the text doesn't seem to center whatever I try.
I tried applying this to the column:
.center{
display : table-cell;
vertical-align : middle;
float:none;
}
and it seemed to work when there's only text, however with the image included it won't.
Here is my code for the column:
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="">
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
And CSS:
#namecolumn {
padding: 1vh;
}
.img-responsive {
height: 100%;
margin: 0 auto;
}
Thanks!
h4 is a block element, so set it as inline-block and give vertical-align:middle; to both img and h4 , so they center to each other on the baseline.
#myimage, #nametext {
display:inline-block;/* defaut display of img tag */
vertical-align:middle;
}
You will need to cretae 2 wrapper divs that have a value of display: table and display: table-cell. Then you can use vertical-align: middle.
DEMO http://jsfiddle.net/Fa8Xx/1750/
CSS
.wrapper {
height: 100%;
display: table;
}
.wrapper-inner {
height: 100%;
display: table-cell;
vertical-align: middle;
}
HTML
<div class="wrapper">
<div class="wrapper-inner">
<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
<img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="" />
<h4 class="pull-right" id="nametext">Welcome!</h4>
</div>
</div>
If you want to vertically center float elements like col-md-3 and so on use this example http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
I am having an issue with a horizontal layout: http://jsfiddle.net/GqH6s/4/
It seems the parent #content div gets its width from its first child (#projects), not the total of all its children.
I know I could work around it with jQuery but I'd like to use CSS if possible.
Thanks for your help!
The basic html:
<div id="content">
<div id="projects" class="section">
<div class="block">Content</div>
</div>
<div id="profile" class="section">
<div class="block">Content</div>
</div>
<div id="team" class="section">
<div class="block">Content</div>
</div>
</div>
And CSS:
#content {
white-space: nowrap;
display: inline-block;
}
.section {
display: inline-block;
}
.block {
white-space: normal;
}
You need to place the #profile and #team div's within the #project div so that they appear inline with the rest of the sections.
Should looks something like this:
I wonder if any one can help me. I have a website with a header, footer and content containers. Now I wish to vertically centre the content between the header and footer containers instead of the page. Does anybody have any ideas how to achieve this???
try the below css
<div >header</div>
<div class="container">
<p>This small paragraph...</p>
</div>
<div >footer</div>
CSS:
div.container {
min-height: 10em;
display: table-cell;
vertical-align: middle ;}
try the below css
<div class="wrapper">
<div >header</div>
<div class="container">
<p>This small paragraph...</p>
</div>
<div >footer</div>
</div>
CSS:
.wrapper{ display: table; }
div.container {
min-height: 10em;
display: table-cell;
vertical-align: middle ;
}
Try this i just added wrapper with display:table style.
table-cell property will work only with a wrapper having display:table property