I use the twitter bootstrap and I wanted to align verticaly a div block with a picture and the text at the right.
Here is the code:
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
</ol>
I tried this but not wortks:
.span6 .row{display: table;}
.span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}
I tried this too:
.span6 .row .span3{display: inline-block; vertical-align: middle;}
None is working. Does somebody have an idea?
Thanks in advance.
Try this:
.row > .span3 {
display: inline-block !important;
vertical-align: middle !important;
}
Edit:
Fiddle: http://jsfiddle.net/EexYE/
You may need to add Diego's float: none !important; also if span3 is floating and it interferes.
Edit:
Fiddle: http://jsfiddle.net/D8McR/
In response to Alberto: if you fix the height of the row div, then to continue the vertical center alignment you'll need to set the line-height of the row to be the same as the pixel height of the row (ie. both to 300px in your case). If you'll do that you will notice that the child elements inherit the line-height, which is a problem in this case, so you will then need to set your line height for the span3s to whatever it should actually be (1.5 is the example value in the fiddle, or 1.5 x the font-size, which we did not change when we changed the line-height).
Try removing the float attribute from span6:
{ float:none !important; }
If I remember correctly from my own use of bootstrap, the .spanN classes are floated, which automatically makes them behave as display: block. To make display: table-cell work, you need to remove the float.
As well as the previous answers are you could always use the Pull attrib as well:
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3 pull-right"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
i use this
<style>
html, body{height:100%;margin:0;padding:0 0}
.container-fluid{height:100%;display:table;width:100%;padding-right:0;padding-left: 0}
.row-fluid{height:100%;display:table-cell;vertical-align:middle;width:100%}
.centering{float:none;margin:0 auto}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
Related
I want to align and image and an div inline. I also want the top's of the image and div to be aligned aswell. This is what I have so far
<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid d-inline-block">
<div class="comment d-inline-block">
<div class="comment-header">
<span>title</span>
</div>
<blockquote>comment</blockquote>
</div>
I tried the class d-inline-block and it gets close to what I'm looking for but i need the text to be at the top.
You can see here:http://www.bootply.com/zpj12TL4wI
Bootstrap 4 includes a utility class for that: align-top. No extra CSS is needed...
<div>
<img src="http://lorempixel.com/500/333/nature/2" class="img-fluid">
<div class="comment d-inline-block align-top">
<div class="comment-header">
<span>title</span>
</div>
<blockquote>comment</blockquote>
</div>
</div>
http://www.bootply.com/wtAOA1JPn1
Just a vertical-align change is what ya need:
.comment {
vertical-align: top;
}
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/
How do I change the width of the <a> tag below exactly as the test_small.jpg image width?
<div class="row">
<div class="col-md-5">
<a class="fancybox thumbnail" href="/assets/images/gallery/test.jpg">
<img class="img-responsive" src="test_small.jpg">
</a>
</div>
<div class="col-md-7">
...
</div>
</div>
I tried using:
<a class="fancybox thumbnail" style="width: auto" href="/assets/images/gallery/test.jpg">
without success.
Thanks.
EDIT: http://www.bootply.com/PGsq7xJeOt
You could just add an auto width. You will need to specify display: block for this to take effect.
.fancybox.thumbnail {
display: block;
width: auto;
}
I'd add class to that a .. for example: .customThumbnail
HTML:
<a class="fancybox thumbnail customThumbnail" href="/assets/images/gallery/test.jpg">
<img class="img-responsive" src="test_small.jpg">
</a>
CSS:
a.customThumbnail {display: block; width: 200px;}
You can use any width here (within col-md-5), since your image is responsive - it will adjust.
Also, try resetting padding (as the "a" might have some padding around it).
a.customThumbnail {display: block; width: 200px; padding: 0}
Although, a JSFiddle would be the best :)
I have an active example on ToWho.
<div class="row">
<div class="col-md-5">
<a href="/assets/images/gallery/test.jpg">
<div class="content"> <!-- This div isn't necessary, but is helpful for organizing -->
<img class="img-responsive" src="test_small.jpg" alt="Small Images">
</div>
</a>
</div>
<div class="col-md-7"></div>
</div>
Why it's not working is hard to solve without a fiddle. The anchor shouldn't need anything special to make it take up the space of the div, especially since it's in a Bootstrap grid element.
Try to make a new class giving it width:100% or make it an inline style.
<div class="row">
<div class="col-md-5">
<img class="image-responsive" style="width:100%;" src="test_small.jpg"/> </div>
<div class="col-md-7">
...
</div>
</div>
I have two inline divs, the second of which uses vertical-align:top. The problem is that the second div begins with a h2 and then followed by some content, and h2 by definition doesn't listen to vertical-align. So the h2 is dragging down the rest of the contents. How do I fix that?
<div style="display:inline;">
<img src="" width=300 height=600>
</div>
<div style="display:inline; vertical-align:top;">
<h2>Heading</h2>
<p>
Paragraph of text
</p>
</div>
The fix worked thanks to the answers from #Ishan Jain and #Hiral. I now have a similar problem with two nested divs in the original right div. New code:
<div style="display:inline;">
<img src="" width=300 height=600>
</div>
<div style="display:inline-block; vertical-align:top;">
<h2>Heading</h2>
<div style="display:inline-block; vertical-align:top;">
<h4>Heading</h4>
<img src="" width="350" height="233">
</div>
<div style="display:inline-block; vertical-align:top;">
<h4>Heading</h4>
<img src="" width="350" height="191">
</div>
<p>
Paragraph of text
</p>
</div>
You must use display:inline-block; for make div inline.
This property allows a DOM element to have all the attributes of a block element, but keeping it inline.
Use this: style="display:inline-block; vertical-align:top;"
Try this
Or just try to make your first div float:left:
Try this
Try:
HTML
<div>
<img src="" width=300 height=600>
</div>
<div>
<h2>Heading</h2>
<p>
Paragraph of text
</p>
</div>
CSS:
div{
display:inline-block; //change from inline to inline-block
vertical-align:top;
}
DEMO
I am sure there is a simple solution to it.. but I have some markup that is overlapping. I have a img.pull-left and a blockquote. The img is currently sitting in between the grey left border and the block quote. Markup is pretty simple:
<div class='container'>
<div class='row'>
<div class="entry-content clearfix">
<a class="pull-left" href="#noop" title="The first post">
<img width="70" height="47" src="logo-lw.png" class="inline attachment-thumbnail wp-post-image" alt="logo-lw"/>
</a>
<blockquote>
<p>Some Quote...</p>
</blockquote>
</div>
</div>
</div>
Here is a fiddle showing the issue
Add inline-block to the blockquote:
blockquote{
display: inline-block;
}
This is also a good use case for the bootstrap media object.