I got some images in a div:
<div>
<img src="1.png"> </img>
<img src="1.png"> </img>
</div>
And this in browsers is:
-----------------
|XX |
-----------------
and I want to these images to be located in the center of the div, that is to say, like this:
-----------------
| XX |
-----------------
How to do that?
PS: Maybe this question is just very trivial, but I'm a newbie in CSS/HTML and I just can't overcome.
For images, a simple text-align: center would suffice.
http://jsfiddle.net/G57zL/1
div {
text-align: center;
}
Demo here: http://jsfiddle.net/Wc8kz/
And only one suggestion: img is self-closing tag and should be defined as <img src="..." /> or even <img src="..."> in HTML5. Code <img src="..."></img> is not valid.
Right way to do it according to W3c
img {
display: block;
margin-left: auto;
margin-right: auto
}
Fiddle
Css
div.centered{
text-align:center;
}
HTML
<div class="centered">
<img src="1.png" />
<img src="1.png" />
</div>
DEMO
Related
Can someone show me how to put text under every individual image and also images must be in same line which is working? I understand that default display for "a" tag is block and for "img" tag is display inline.
This is my code:
HTML
<div class="other-content">
<div class="search">
<h1>We Offer best experience in the world</h1>
<img src="../Images/beach.jpg" alt="beach" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/desert.jpg" alt="desert" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/evergreen.jpg" alt="maoutin" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/snow-pathway.jpg" alt="snow-pathway" width="200px" height="150px">
</div>
</div>
CSS
.other-content .search {
background: #ffffff;
height: 300px;
text-align: center;
}
.other-content .search p{
display: inline;
}
Just put the picture with the text in separate divs and make the divs width smaller until the text is below the picture. And with these divs, assign display:inline-block;
i want to make image in center but not able to do it
my aspx code is
<figure class="centercarosal">
<img src="UImages/<%#Eval("Logo") %>" style="height: 100px" alt="">
</figure>
and the class for centercarosal is
.centercarosal{
text-align:center!important
}
I think you are missing the browser specification for both please try this
.centercarosal {
text-align: -moz-center;
}
I'm trying to build a website and when I try make a wrapper for an image, nothing happens. The aim is to make a section with an image I can use as a background and the wrapper hold the content in order (centered etc).
CSS
.image-wrapper {
width:150px;
margin:0 auto;
}
HTML
<section>
<img src="img/animebreeze.jpg" alt="animeb-image">
<div class="image-wrapper">
</img>
</div>
</section>
You have mistake in your HTML </img>
<section>
<img src="img/animebreeze.jpg" alt="animeb-image">
<div class="image-wrapper">
</img>
</div> </section>
Should be
<section>
<div class="image-wrapper">
<img src="img/animebreeze.jpg" alt="animeb-image">
</div>
</section>
Fiddle
Place the img tag inside the image-wrapper.
There is no closing tag for <img> tag.
CSS
.image-wrapper { margin: 0 auto; }
HTML
<section>
<div class="image-wrapper"><img src="img/animebreeze.jpg" alt="animeb-image"></div>
</section>
You can try this way as well:
CSS
.image-wrapper { background: url(img/animebreeze.jpg)no-repeat center center; }
Using a background-image in your CSS, you don't use the <img> tag now.
How can I put the following elements on the same line? I know it has to do with the display property, but that's the one that always stumps me and can never seem to get to work.
http://jsfiddle.net/MgcDU/4137/
HTML:
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-container">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
<div class="thumbnail-last">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
</div>
</div>
</div>
CSS:
.small-video-section {
height: 134px;
}
.thumbnail-container {
width: 220px;
margin-top: 15px;
margin-right: 20px;
display: inline-block;
}
.thumbnail-last {
width: 220px;
margin-top: 15px;
display: block;
}
Thanks. :)
You could use float: left or float: right
img {float: left;}
Note, you'll have to use clearfix which Mr Gallagher explains nicely or follow with any element that has clear: both; on it to get the results you expect.
You can position them absolutely
img {position: absolute;}
and then position one by one using left and right or margins
img.image-one {left: 0: top: 0;}
img.image-one {right: 300px; top: 0;}
img.image-three {margin-left: 100px;}
/*etc etc...*/
EDIT: didn't notice the divs, you should put float left on those as someone else mentioned, however both options technically work in your case. Theres probably a dozen more ways to do this...
Changing display:block to display:inline-block in your .thumbnail-last rule will do it.
try float: left on the divs. That will get everyone to show up in line. other wise block elements introduce a break
Try this code :- Use only float:left
<div class="container">
<div class="small-video-section">
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-container" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
<div class="thumbnail-last" style="float:left;height:134px;width:150px">
<img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="150" />
</div>
</div>
</div>
All your code are ok. But , I have only added style in HTML part.
Update link :-
http://jsfiddle.net/MgcDU/4148/
Its working fine.
It's an old post but it cames when searching for place elements on the same line with bootstrap so I will help others.
Boostrap has the Inline form class to place some elements on the same line (it's left aligned).
Bootstrap CSS inline form
I used to know how to put an image on top and then justify the text below the image so that it stays within the borders of the width of the image. However, now I have no idea how to do this. How is this accomplished?
Your HTML:
<div class="img-with-text">
<img src="yourimage.jpg" alt="sometext" />
<p>Some text</p>
</div>
If you know the width of your image, your CSS:
.img-with-text {
text-align: justify;
width: [width of img];
}
.img-with-text img {
display: block;
margin: 0 auto;
}
Otherwise your text below the image will free-flow. To prevent this, just set a width to your container.
You can use HTML5 <figcaption>:
<figure>
<img src="img.jpg" alt="my img"/>
<figcaption> Your text </figcaption>
</figure>
Working example.
In order to be able to justify the text, you need to know the width of the image. You can just use the normal width of the image, or use a different width, but IE 6 might get cranky at you and not scale.
Here's what you need:
<style type="text/css">
#container { width: 100px; //whatever width you want }
#image {width: 100%; //fill up whole div }
#text { text-align: justify; }
</style>
<div id="container">
<img src="" id="image" />
<p id="text">oooh look! text!</p>
</div>
This centers the "A" below the image:
<div style="text-align:center">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/opentoselect.gif" />
<br />
A
</div>
That is ASP.Net and it would render the HTML as:
<div style="text-align:center">
<img id="Image1" src="Images/opentoselect.gif" style="border-width:0px;" />
<br />
A
</div>
I am not an expert in HTML but here is what worked for me:
<div class="img-with-text-below">
<img src="your-image.jpg" alt="alt-text" />
<p><center>Your text</center></p>
</div>