I am trying to align my text under a line of 3 images using HTML/CSS. As
soon as i remove my comments it aligns everything vertically.
<div class="inline">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<!-- <p> This is a test</p> -->
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<!-- <p> This is a test</p> -->
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<!-- <p> This is a test</p> -->
</div>
See my example https://jsfiddle.net/gvrr25bk/1/
Thanks in advance!
Ivan
you could wrap each img with it's p inside a div and add display:inline-block to that div instead
.inline {
text-align: center;
}
.wrap {
display: inline-block;
margin: 0 2%;
}
<div class="inline">
<div class="wrap">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<p> This is a test</p>
</div>
<div class="wrap">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<p> This is a test</p>
</div>
<div class="wrap">
<img class="rel" src="http://imgur.com/a/n2skT.png" alt="icon" />
<p> This is a test</p>
</div>
</div>
see more here CSS align and here CSS inline-block or in general about css CSS w3schools
about HTML blocks and inline elements see here HTML Block and Inline Elements
the idea to the solution i gave you is that if you want the image to stay together with it's text , you should put them in the same container separately. in that way they will always stay together as you want.
Related
This is my simple code:
<h1 style="text-align:center;">Title TEST</h1>
<img class="center" src="MyImage.jpg">
<footer>
<p style="text-align:center;">Footer TEST</p>
</footer>
Text is centered correctly, the image not.. Why? I can't understand
In your current attempt, class="center" would have no meaning unless you have a class called .center defined in your CSS. It doesn't look like you have a stylesheet, though.
Here are two ways to center an image horizontally:
Use text-align: center on a parent element:
<div style="text-align: center;">
<h1>Title TEST</h1>
<img src="https://via.placeholder.com/350x150" />
<footer>
<p>Footer TEST</p>
</footer>
</div>
Center the image element itself by making it block-level and giving it a margin-left and margin-right of 0:
<h1 style="text-align: center;">Title TEST</h1>
<img style="display: block; margin: 0 auto;" src="https://via.placeholder.com/350x150" />
<footer>
<p style="text-align: center;">Footer TEST</p>
</footer>
I want to align both image tag and p span tag next to each other. And I do not want to put them in two different div's to follow the grid system as then it doesn't give me the correct final output that I desire.
Here is my small piece of code that I want to correct: FIDDLE
<div class="row">
<div>
<div class="col-md-9 col-md-offset-3" style="padding-right:0px">
<img src="Images/signin_logo.jpg" width="150" height="110" />
<p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
<br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>
</p>
</div>
</div>
</div>
FIDDLE
I want the <p> tag next to the image tag.
Two options
.row p {
display: inline-block;
}
<div class="row">
<div>
<div class="col-md-9 col-md-offset-3" style="padding-right:0px">
<img src="Images/signin_logo.jpg" width="150" height="110" />
<p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
<br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>
</p>
</div>
</div>
</div>
or
.row img {
float: left;
}
<div class="row">
<div>
<div class="col-md-9 col-md-offset-3" style="padding-right:0px">
<img src="Images/signin_logo.jpg" width="150" height="110" />
<p> <span style="color:#989898; font-size:36px">Template Fire Sign In</span>
<br /> <span style="color:#A8A8A8; font-size:18px">Please sign in with your credentials now to get access.</span>
</p>
</div>
</div>
</div>
Apply this css --
img, p {
display:inline-block;
}
This will make the img and p tag to be next to each other, as long as both element's width doesn't cross the container's width.
I can't get my block div's to center except my text on top and bottom. For some reason they are aligning only to the left.
I've tried margin:auto and setting the width 100%. I'm sure its probably an easy fix but I can't seem to find the error in my code.
Only thing that fixes it is adding a margin-left, however it doesn't look in all dimensions so would prefer if it naturally centered as it should.
http://jsfiddle.net/cV4UJ/
Some HTML please see JSfiddle instead:
<!-- Blocks -->
<div class="grid_24 center">
<div class="grid_7">
<div class="grey_boxes">
<p class="grey">
test
</p>
<p class="complete">
Complete
<img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_complete.png" class="complete" alt=" "/>
</p>
</div>
</div>
<div class="grid_1">
<p>
</p>
</div>
<div class="grid_7">
<div class="panel">
<div class="boxes card">
<p class="boxtext">
test
</p>
<p class="rotate">
<img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_rotate.png" class="rotate" alt=" "/>
</p>
</div>
<div class="boxesback card">
<p class="boxtext">
test
button
</p>
</div>
<div class="grid_7">
<div class="panel">
<div class="boxes card">
<p class="boxtext">
test
</p>
<p class="rotate">
<img src="https://www.gstatic.com/gmktg/dub-img/newbie_be_icon_rotate.png" class="rotate" alt=" "/>
</p>
</div>
<div class="boxesback card">
<p class="boxtext">
test
button
Any help would be much appreciated.
Thanks
http://jsfiddle.net/cV4UJ/2/
to make it work, you need to force the div.center to behave like a div (right now it has the properties of .grid_24 class, which is an inline left floated element)
.center {
margin: 0 auto !important;
float: none !important;
display: block !important;
width: 980px;
clear: both;
}
the most important properties needed for a centered div:
margin: 0 auto;
no float
be a block element (original display for a div)
have a width
i also put !important, to force it lose all the properties of grid_24
I have a container which has three divs. Each div contains a hidden div which has a 'hide' class (display:none;) inside which is supposed to show when hovering on its parent div.
I use toggleClass('show') to which makes the secretDiv display has a block. I need the secretDiv to be shown when hovering on the parent div.
The parent div should show on top of the div below, and not push the other divs
http://jsfiddle.net/2xLMQ/4/
--- HTML ---
<div class="row">
<div class="element">
<img src="http://placehold.it/200x100" alt="" title="" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
<div class="element">
<img src="http://placehold.it/200x100" alt="my image" title="image title" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
</div>
<div class="row">
<div class="element">
<img src="http://placehold.it/200x100" alt="" title="" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
<div class="element">
<img src="http://placehold.it/200x100" alt="my image" title="image title" />
<div class="secretDiv hide">
<p>Some secret text and stuff</p>
</div>
</div>
</div>
--- CSS ---
.hide {display:none;}
.show {display:block;}
.row {height:160px;background:#dedede;float:left;width:480px;position:relative:z-index:1;}
.row .element {position:relative;z-index:9;text-align:center; float:left; background:#666;width:200px;padding:12px;margin:6px;}
.row .image {}
.row .secretDiv {background:#ff0000;padding:8px;}
--- JS ---
$('.element').hover(function(){
$('.element .secretDiv').toggleClass('show');
});
First at all change your selector to only match the respective hidden div:
$('.secretDiv',this).toggleClass('show');
Then add another class on that item to display ontop of the others :
$(this).toggleClass('ontop');
And the class:
.row .ontop {z-index:10;background:orange;}
Check this Demo
Simply add absolute positioning to your 'secret' div:
.row .secretDiv {background:#ff0000;padding:8px; position: absolute; top: 5px; left: 5px;}
Fiddle here: http://jsfiddle.net/moonspace/2xLMQ/12/
As a bonus, I've edited your jQuery to show only the 'secret' div associated with each element:
$('.secretDiv', this).toggleClass('show');
I am a newb. I have finally figured out how to get images aligned on my main page in my index.html along with code in my default.css.
Now I would like to add text under each image. I know this should be easy, but am not able to find anything that seems to work.
Here is my HTML Code:
<div id="random">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
</div>
Here is my CSS code:
#random{
max-width: 650px
}
#random img{
display:inline-block;
width:80px;
}
Wrap your images in a container, and put the text under them. Something like this:
http://jsfiddle.net/8xf2N/1/
<div id="random">
<div class='img-container'>
<img src="1.jpg" />
<p>Image One</p>
</div>
<div class='img-container'>
<img src="2.jpg" />
<p>Image Two</p>
</div>
<div class='img-container'>
<img src="3.jpg" />
<p> Image Three</p>
</div>
</div>
CSS:
#random{
max-width: 650px
}
#random img{
width:80px;
}
.img-container{
display: inline-block;
}
You can always use the HTML 5 figure tag. (Assuming your website is follwoing HTML 5 standards). That way, you can nest a tag and style them.
<div id="random>
<figure>
<img src="1.jpg"/>
<figcaption>Your Caption</figcaption>
</figure>
</div>
That way you have selectors to style them with CSS as well.
Try:
#random{
max-width: 650px
}
#random .image-wrap{
display:inline-block;
width:80px;
}
<div id="random">
<div class="image-wrap">
<img src="1.jpg" />
<p>Text for image 1</p>
</div>
<div class="image-wrap">
<img src="2.jpg" />
<p>Text for image 2</p>
</div>
<div class="image-wrap">
<img src="2.jpg" />
<p>Text for image 2</p>
</div>
</div>
You should wrap the images in a div. Here is a fiddle http://jsfiddle.net/a6pNw/
CSS:
#random{
max-width: 650px
}
#random div{
display:inline-block;
width:80px;
text-align:center;
}
HTML:
<div id="random">
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>
<div>
<img src="http://placehold.it/80x80" />
<p>Some text</p>
</div>