I would like to center text underneath images. The images and text in question are in the passphrase generator at this site. I have tried simply adding a <br> in between the images and the text, different display properties, the bottom and top properties, changing flex direction on the text alone, probably more that I can't remember at this time.
This is the JS just in case there is something wrong with the way im generating the images and text.
All help is greatly appreciated!
You use figure and figcaption elements from html5
<figure>
<img src="http://www.innomate.com/application/files/4514/8474/3363/front01.png" />
<figcaption>Testing</figcaption>
</figure>
Here is fiddle to demonstrate:
https://jsfiddle.net/twk3abom/
I'd suggest you to wrap your images and phrases in a figure element to break the layout of the parent that has display: flex;. See this fiddle for a quick reference.
You need to wrap each <img> and <p> tags inside a <div>. That should do the trick.
So it should look like this,
<div>
<img>
<p></p>
</div>
<div>
<img>
<p></p>
</div>
...
You can try to put each element in a <div> nothing else to change.
This would look like this on HTML:
<div id="passphraseBilder">
<div>
<img>
<p>bowling</p>
</div>
<div>
<img>
<p>doughnut</p>
</div>
<div>
<img>
<p>calculator</p>
</div>
</div>
Try This :
div {
width: 200px;
margin: 0 auto;
text-align: center;
border: 1px solid #ccc;
}
img {
width: 100%;
}
p {
color: #fff;
background-color: #000;
margin: 1px 1px 2px 1px;
}
<div id="wrapper">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRJqYSNS-A4_Vd8CptMrxXbIFS3q1HaHPHZSnscG1iNSMmrMKRS">
<p>Flowers</p>
</div>
Related
I'm trying to get the following multi-item carousel to scroll smoothly to the next item. Right now, it jumps to the next item when clicked, but I would like it to transition/ease - or go smoothly - to the next section.
<style>
body {
width: 1400px;
}
.Blog {
position: relative;
background-color: #000;
}
.inner {
overflow: hidden;
font-size: 0;
white-space: nowrap;
}
.Blog-item {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display: inline-block;
}
.controlDiv {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
text-align: center;
}
.control {
color: #fff;
font-size: 20px;
display: inline-block;
padding: 4px;
}
</style>
<div class="Blog">
<div class="inner">
<div class="Blog-item" >
<img src="http://placehold.it/727x356?text=1" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=2" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=3" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=4" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=5" alt="" />
</div>
<div class="Blog-item">
<img src="http://placehold.it/727x356?text=6" alt="" />
</div>
</div>
<div class="controlDiv">
<a class="control control-left glyphicon glyphicon-menu-left" href=""></a>
<a class="control control-right glyphicon glyphicon-menu-right" href=""></a>
</div>
</div>
<script>
$(document).ready(function () {
$('.control-right').click(function () {
$(this).blur();
$(this).parents('.Blog').find('.Blog-item').first().insertAfter($(this).parents('.Blog').find('.Blog-item').last());
return false;
});
$('.control-left').click(function () {
$(this).blur();
$(this).parents('.Blog').find('.Blog-item').last().insertBefore($(this).parents('.Blog').find('.Blog-item').first());
return false;
});
});
</script>
Here's the fiddle: http://jsfiddle.net/bcw8dysawk/z1wo4uy6/3/
If I understand you correctly, I think you are after something like this:
http://jsfiddle.net/uh2skm0e/
I basically used jQuery's animate function to animate elements on the page and inserted a modified version of your original code into the animate's callback function.
I completed the 'next slide' operation by modifying the margin-leftcss attribute and the 'previous slide' operation by modifying the left css attribute.
You can see both options and pick your preferred method (left is generally used).
I also needed to add a position:relative to the .Blog-item css rule since the script manipulates z-index and this requires elements to have an explicit CSS position.
Two things to mention:
1) My solution is a pure JavaScript solution. You can look into using the transition CSS attribute to achieve animations without the need for JavaScript, but you may need to reorganise your code slightly (which leads me onto my next point)
2) Usually with sliders, the element positions are not actually changed in the markup...it's only the visibility settings (display CSS attribute) that are changed. So when 'slide 2' displays, all slides are set to display:none except for 'slide 2'. This means all you need to do is use JavaScript to add a class to the visible slide and it will display...couple this with the transition CSS attribute and you can easily achieve some good effects.
Let me know if this is what you were after.
I am trying to move my divs with the texts hallo1 and hallo2 to my canvas element and make it centered.
Does anyone have and idea on how to achieve this?
Below is code:
<canvas id="canvas1">hi</canvas>
<div>
hallo1
</div>
<div>
hallo2
</div>
<canvas id="canvas2"></canvas>
<div>
hallo1
</div>
<div>
hallo2
</div>
<canvas id="canvas3"></canvas>
<div>
hallo1
</div>
<div>
hallo2
</div>
<canvas id="canvas4"></canvas>
<div>
hallo1
</div>
<div>
hallo2
</div>
put everything in a div and center it with text-align:center;. If you still need it to be on the left side of the screen use float:left;, like this:
fiddle
#everything {
text-align:center;
float:left;
}
One posibility without modifying your layout is simply adjusting the position:
div {
position: relative;
left: 80px;
top: -125px;
}
fiddle
A version that adjusts to different text widths is to use 13ruce1337 answer and adjust it vertically
#everything {
text-align:center;
float:left;
position: static;
}
div {
position: relative;
top: -125px;
}
I have to redefine everything position, because the style to the text div would modify it
fiddle 2
I'm seeing a lot of "how to vertically align stuff" type questions but I can't seem to find anything that solves this particular problem.
I have 3 "sections" in a jquery dialog and I want them to sit vertically in the space without leaving big gaps in between them.
I don't know their heights as their content is dynamic and changes.
Here's a fiddle showing what I mean:
http://jsfiddle.net/PTQS8/
In it's simplest form the code looks something like this (just imagine that all the br tags are real content though)
<div class="jqDialog">
<section>
<br/><br/>
</section>
<section>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section>
<section>
<br/><br/><br/><br/><br/>
</section>
</div>
Then my current css:
section {
border: solid 1px #DADADA;
margin: 5px;
padding: 5px;
width: 200px;
display: inline-block;
vertical-align: top;
}
I want the bottom section to automatically fill the space above it if possible.
Any ideas?
EDIT:
Maybe I wasn't clear enough ...
This is my ideal result:
http://jsfiddle.net/PTQS8/2/
However bear in mind that the content in the sections is all dynamic so the style definition for "section3" would need to have a dynamic negative top margin in order for this to work.
Figuring this out could be possible with javascript I suppose but I was hoping there might be a more elegant solution.
<!--The simplest way is to use the span and float properties.-->
<!--Make use of table if you dont like the gap between the left and right panes-->
<div class="jqDialog">
<span style="float: left"><section>
<br/><br/>
</section></span>
<span style="float: right"><section>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section></span><span style="float: left">
<section>
<br/><br/><br/><br/><br/>
</section></span>
</div>
If you want them vertically centered, change width:200px to width:100%;
http://jsfiddle.net/PTQS8/3/
<div class="jqDialog">
<section>
<br/><br/>
</section>
<section class="section2">
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</section>
<section class="section3">
<br/><br/><br/><br/><br/>
</section>
</div>
and the css ...
section {
border: solid 1px #DADADA;
margin: 5px;
padding: 5px;
width: 200px;
display: inline-block;
vertical-align: top;
}
.section2 { float: right; }
I have two divs. One div contains an image, and the other will contain a text caption that will be layed over the image.
How can I make the caption div width be equal to the image div in a fluid design?
The page is designed using a fluid layout and thus the image will can size with the browser size is changed.
<div id="captions">Captions</div>
<div id="image"></div>
Is there a way to do this in CSS?
You could put both elements into your div and then set the width
<div id="yourdiv">
<img id="yourimg" src="" />
<p class="yourtext">Here some Text</p>
</div>
and then set the width of .yourtext
.yourtext {
width: 100%;
}
FIDDLE
We may inverse the situation as follows:
HTML
<div id="captions">
Captions..
<div id="image"><img src="http://lorempixel.com/450/200/" /></div>
</div>
CSS
#captions{
background: #000;
color:#fff;
/* width:100%;*/
display:inline-block;
padding-bottom: 0px;
margin-bottom: 0px;
}
#image{
width: 100%;
padding-bottom: 0px;
margin-bottom: 0px;
}
#image img{
vertical-align: bottom;
}
This is a DEMO
I think this will require javascript. I figured it wouldn't hurt to ask though.
We all know how to float an image or div right or left and have the text flow around and below that image. I'm trying to float a div at a fixed width from the top of a container and have text flow around above and below it.
It would be easiest if I could place this div above the paragraph text, but I could insert it if I had to.
I made this crude image outlining what I'm trying to do.
Thanks!
a bit of a cheat but possible using a dummy spacer
CSS:
#wrapper {
width: 500px;
margin: 0 auto;
border: 1px solid #000;
}
.fl {
float: left;
clear: left;
margin: 10px 10px 10px 0;
}
.fr {
float: right;
clear: right;
margin: 10px 0 10px 10px;
}
.dummy {float: right; height: 300px; width: 1px; background: #f00;}
HTML:
<div id="wrapper">
<img src="http://dummyimage.com/100x100/000/fff" width="100" height="100" class="fl">
<span class="dummy"></span>
<img src="http://dummyimage.com/100x200/DAD/fff" width="100" height="200" class="fr">
<p>all your paragraphs follow</p>
</div>
Working Example: HERE
and the spacer does need to be at least 1px wide, but it can be transparent
Have you tried something like this?
http://jsfiddle.net/8DczT/1/
This is exactly what a float does; it puts a box wherever you specify, and content flows around it. See this jsFiddle.
Put a margin-top on your floated div, to push it down from the top, something like this:
<div> <!-- parent containing div -->
<div style="float: right; margin-top: 50px">floated div</div>
<div>paragraph 1</div>
<div>paragraph 2</div>
</div>
As long as you get the margin right, you can floa it halfway between the center of the two paragraph divs.