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;
}
Related
I have a list of images, those image elements have a attribute like index, which I want to use to sort the element of the images in ascending order. with the help of CSS.
Because that index attribute value will change dynamically, more image will also be added by Ajax. So when it will update, that time it will be arranged in that order without doing anything.
.img_container {
width: 100%;
border: 2px black solid;
}
.img_container img {
margin-bottom: 5px;
margin-right: 5px;
}
<div class="img_container">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=1" index="1">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=10" index="10">
<img src="https://dummyimage.com/110x150/000000/ffffff&text=11" index="11">
<img src="https://dummyimage.com/140x150/000000/ffffff&text=14" index="14">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=2" index="2">
<img src="https://dummyimage.com/120x150/000000/ffffff&text=12" index="12">
<img src="https://dummyimage.com/130x150/000000/ffffff&text=13" index="13">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=3" index="3">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=4" index="4">
<img src="https://dummyimage.com/150x150/000000/ffffff&text=15" index="15">
<img src="https://dummyimage.com/500x150/000000/ffffff&text=5" index="5">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=6" index="6">
<img src="https://dummyimage.com/170x150/000000/ffffff&text=17" index="17">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=7" index="7">
<img src="https://dummyimage.com/160x150/000000/ffffff&text=16" index="16">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=8" index="8">
<img src="https://dummyimage.com/180x150/000000/ffffff&text=18" index="18">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=9" index="9">
</div>
Let me know if there is any easy way to do this in CSS.
There is not a good CSS-only solution yet without modifying the HTML or adding inline styles. In the future, it may be possible to achieve this using the attr() function in CSS, but currently this doesn't have wide support for being able to use it outside of the content property.
If the more advanced usage is adopted, a future solution could look like this. Note, this will not work in most current browsers. And you should also use the data- prefix for custom attributes.
.img_container {
border: 2px black solid;
display: flex;
flex-wrap: wrap;
}
.img_container img {
margin: 5px;
order: attr(data-index); /* will not work yet in most browsers */
}
<div class="img_container">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=1" data-index="1">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=10" data-index="10">
<img src="https://dummyimage.com/110x150/000000/ffffff&text=11" data-index="11">
<img src="https://dummyimage.com/140x150/000000/ffffff&text=14" data-index="14">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=2" data-index="2">
<img src="https://dummyimage.com/120x150/000000/ffffff&text=12" data-index="12">
<img src="https://dummyimage.com/130x150/000000/ffffff&text=13" data-index="13">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=3" data-index="3">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=4" data-index="4">
<img src="https://dummyimage.com/150x150/000000/ffffff&text=15" data-index="15">
<img src="https://dummyimage.com/500x150/000000/ffffff&text=5" data-index="5">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=6" data-index="6">
<img src="https://dummyimage.com/170x150/000000/ffffff&text=17" data-index="17">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=7" data-index="7">
<img src="https://dummyimage.com/160x150/000000/ffffff&text=16" data-index="16">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=8" data-index="8">
<img src="https://dummyimage.com/180x150/000000/ffffff&text=18" data-index="18">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=9" data-index="9">
</div>
I have added multiple images side by side in my blog
here is the code
<div class="images">
<figure>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsTtMLyNG08eYR0J00YY8zJQzB8Q" style="width:200px; height:100px;"/>
<figcaption>Itty</figcaption>
</figure>
<figure>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsTtMLyNG08eYR0J00YY8zJQzB8Q" style="width:200px; height:100px;"/>
<figcaption>Bitty</figcaption>
</figure>
<figure>
<img src="http://oi57.tinypic.com/2mrch37.jpg" style="width:200px; height:100px;"/>
<figcaption>Kitty</figcaption>
</figure>
<figure>
<img src="http://oi57.tinypic.com/2mrch37.jpg" style="width:200px; height:100px;" />
<figcaption>Commiteh</figcaption>
</figure>
Here is the css code. I added html and css in same widget by choosing html/javascript external widget in blogger by add widget option and i added that gadget below the menu bar and pages. Iam not able to know the adding of space between the menu bar and this widget. This is the orginal template as it looks In this site
figure {
display: inline-block;
margin: 30px 1em 1em 0;
}
figcaption {
font-family: 'Comic Sans MS';
text-align: center;
font-size: 12pt;
}
You're going to have to change your widget order of <div id="HTML3"> and put it after <div id="navbar2-mid">.
And also put a <div class="clear"> after <div id="header-area">.
If I understood your question correctly, this should work!
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
Im pretty new to html/css so maybe this is a really simple thing but none of my images links on one page of the site show up when I try to click on them the image shows but the link never appears and the cursor never changes anyway here is the relevant section of code
<div id="content">
<div id="imagelink">
<img border="0" src="Images/pic.png" alt="A Picture" />
</div>
#imagelink {
background-image:url("Images/file.png");
display:block;
height:224px;
width:401px;
text-indent:-9999px;
position:absolute;
left:15%;
top:25%;
}
<div id="imagelink">
<img border="0" src="Images/pic.png" alt="A Picture" />
</div>
Try not to use the img tag and instead, use a div for your image:
<a href="#" target="_BLANK">
<div class="myImage"></div>
</a>
.myImage{
background: url(Images/file.png) no-repeat top center;
height: 224px;
width: 401px;
}
if your server is case sensitive change Images to images
add ./ or http://domain.com/path/to/images/ to the paths
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>