I have a div inside which I am showing images. I have 1 to 5 images loaded from database dynamically. So the no. of images is not fixed. I want to center images inside div irrespective of their numbers.
Please HELP!!!!!!!!
<div class="sliderImg" style="width:975px; height:306px;text-align:center;">
<img id="img1" runat="server" visible="false" width="195" height="306" alt="slider">
<img id="img2" runat="server" visible="false" width="195" height="306" alt="slider">
<img id="img3" runat="server" visible="false" width="195" height="306" alt="slider">
<img id="img4" runat="server" visible="false" width="195" height="306" alt="slider">
<img id="img4" runat="server" visible="false" width="195" height="306" alt="slider">
</div>
From code behind I set their visibility according to some conditions.
images are inline replaced elements, so no matter how many images are outputted, just be sure to have a div wide enough (to contain at least 5 images) and set text-align: center to it
Without code you have already tried it's difficult to answer however something like the following might be what you're looking for:
HTML:
<div>
<img src="http://placehold.it/150x150" />
<img src="http://placehold.it/150x150" />
<img src="http://placehold.it/150x150" />
</div>
CSS:
div {
text-align: center;
width: 100%:
}
It's example for vertical and horizontal centering elements in custom div container.
html:
<div class="images">
<!-- images -->
<img src="#" />
<img src="#" />
<img src="#" />
</div>
css:
.images
{
/* centering image */
text-align: center;
/* container size */
display: block;
height: 100px;
line-height: 100px;
width: 100%;
/* reset 'paddings' */
font-size: 0;
/* for example */
background: #f8f8f8;
}
.images img
{
/* for centering image */
display: inline-block;
vertical-align: middle
/* image size */
width: 50px;
height: 50px;
border: 1px #f00 solid;
/* for example */
vertical-align: middle;
}
So, look at this fiddle: http://jsfiddle.net/artem_fitiskin/saq6E/
just do only one things in your css
.sliderImg{width:975px; height:306px;text-align:center;}
.sliderImg img{ display:block; margin:0 auto; text-align:center;}
hope your problem will solved after using this.
Related
How can I adjust the code so that there is no space between each image and also how to keep them from overlapping. I tried to add another image but one ended up overlapping it. I have tried looking it up but no matter what I try it just doesn't work.
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
display: table;
clear: both;
}
.text {
text-align: center;
}
<!--IMAGES-->
<div class="row">
<div class="column">
<img src="https://i.pinimg.com/originals/a0/4f/0a/a04f0abbac3ebf36f1f302937a45071f.jpg" height="300px" width="300px" alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/originals/5f/09/7c/5f097ceb782476bae9dc15ec1dd364b1.jpg" height="300px" width="300px" alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/736x/68/c7/9f/68c79f2f9203f086d70e75985bf258f2--funny-pets-funny-animals.jpg" height="300px" width="300px" alt="" />
</div>
</div>
You could use flexbox
<div class="row_flex">
<div class="column_flex">
<img src="https://i.pinimg.com/originals/a0/4f/0a/a04f0abbac3ebf36f1f302937a45071f.jpg"
height="300px" width="300px" alt="" />
</div>
<div class="column_flex">
<img src="https://i.pinimg.com/originals/5f/09/7c/5f097ceb782476bae9dc15ec1dd364b1.jpg"
height="300px" width="300px" alt="" />
</div>
<div class="column_flex">
<img src="https://i.pinimg.com/736x/68/c7/9f/68c79f2f9203f086d70e75985bf258f2--funny-pets-funny-animals.jpg"
height="300px" width="300px" alt="" />
</div>
And the CSS
.row_flex {
display: flex;
justify-content: center;
}
I have changed your class names by adding the word "flex" as it looks like you're using something like Zurb foundation or bootstrap, where you wouldn't want to change the properties of "row" and "column" as the rest of your site will likely depend on them.
If you want images to be a little repsonsive I would suggest the following:
.column {
padding: 5px;
/* flex: 1;
flex-basis: 33%; */
max-width: calc(33vw - 10px);
display: flex;
}
.column img {
max-width: inherit;
}
/* .row::after {
content:"";
// display: table;
clear: both;
} */
.text {
text-align: center;
}
.row {
display: flex;
justify-content: center;
}
<div id="app"></div>
<div class="row">
<div class="column">
<img src="https://i.pinimg.com/originals/a0/4f/0a/a04f0abbac3ebf36f1f302937a45071f.jpg"
alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/originals/5f/09/7c/5f097ceb782476bae9dc15ec1dd364b1.jpg"
alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/736x/68/c7/9f/68c79f2f9203f086d70e75985bf258f2--funny-pets-funny-animals.jpg"
alt="" />
</div>
Depending on whether or not you want this to run for other people you could make your own image on paint where you combine all 3 of the other images and then create an indirect path by guiding it to your images file. There are better methods if you want to be able to give the code to other people or have it work for other people on a browser involving more difficult code but if this is just going to be displayed on your computer and will not go to the public, I think that this would be much easier than coding the solution. That is, unless you are using bootstrap or another adapter.
I want to horizontally align to the center everything in my "loginArea" DIV
<div id="contentArea">
<div id="loginArea">
<div id="loginInstructions">Login to vote</div>
<div id="loginImages">
<img height="50" border="0" alt="Google" title="Google" class="loginImg" src="/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg">
<img height="50" border="0" alt="Facebook" title="Facebook" class="loginImg" src="/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png">
<img height="50" border="0" alt="Twitter" title="Twitter" class="loginImg" src="/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png">
<img height="50" border="0" alt="LinkedIn" title="LinkedIn" class="loginImg" src="/assets/linkedin-1d4c0d36adcec44fd86c11c47834e51e3f3226b623f91a2f215993633956e431.png">
<a title="MySpace" href='javascript:alert("Loser")'>
<div id="mySpaceLogo"></div>
</a> </div>
</div>
So I specified these styles
#contentArea {
width: 100%;
background-color: blue;
}
#loginArea {
display: flex;
vertical-align: middle;
align-items: center;
text-align:center;
width: 100%;
background-color: red;
}
#loginInstructions {
display: auto;
}
#loginImages {
display: auto;
}
But neither my " text-align:center;" or "align-items: center;" is having any effect -- https://jsfiddle.net/980obtcz/ . How do I horizontally align my items?
Text-align:center works on elements that are "inline" or "inline-block". That means text, images, links, etc. that don't ask to take up as much width as they can, only what they need. Their "display" property is set to inline, and they can be centered like text would be -- hence the name, text-align.
If you want to center a non-inline element, most often 'block', now you're talking about elements that naturally want as much width as they can get. So centering them doesn't mean much, because they fill the whole thing. In this case you can do so either by setting its left and right margins to 'auto' and specifying a width, or by using a different display mode on the parent like flex.
It looks like you are part of the way towards implementing the second option. On your parent element, you DO have display flex. But flex is like a wild stallion that must be tamed. It takes some getting used to. For instance, it doesn't care much about text-align:center.
Making your parent element flex (without any other specifications) is basically saying, "Hey parent element, fit in all of your children in a row." In your case you have two children, both of which are div's, so they will go side by side.
Flex has a primary axis (by default, horizontal) and to center the items within that axis you'd use justify-content: center. Adding that to your CSS for #loginArea puts all of the children in one row, but centered.
That may be what you want. If instead you wanted the loginInstructions div to be on it's own line, you could also add: flex-wrap:wrap; to the parent, allowing it to create additional rows, and flex-basis:100% to loginInstructions, telling it to take up 100% of a flex-row.
If you change display: flex; to display:inline-block; text-align:center; will center your elements.
#contentArea {
width: 100%;
background-color: blue;
}
#loginArea {
display: inline-block;
text-align:center;
width: 100%;
background-color: red;
}
<div id="contentArea">
<div id="loginArea">
<div id="loginInstructions">Login to vote
<img height="50" border="0" alt="Google" title="Google" class="loginImg" src="/assets/google_plus_icon-8d7622763257233cf58e0465806f58d7c4b82b85271c2d03d0e02b2fadc4ac76.jpg">
<img height="50" border="0" alt="Facebook" title="Facebook" class="loginImg" src="/assets/facebook-b74d7c49fd91aa6ca76518bf46c7b75fa3b23f47028bea4b2ffaa39f5776dd91.png">
<img height="50" border="0" alt="Twitter" title="Twitter" class="loginImg" src="/assets/twitter_icon-7dbf8db24c3ad328ea28cba340e4f53e033b64b149850324822cdb622d77f331.png">
<img height="50" border="0" alt="LinkedIn" title="LinkedIn" class="loginImg" src="/assets/linkedin-1d4c0d36adcec44fd86c11c47834e51e3f3226b623f91a2f215993633956e431.png">
<a title="MySpace" href='javascript:alert("Loser")'>
<div id="mySpaceLogo"></div></a>
</div>
</div>
use justify-content: center;
#loginArea {
...
justify-content: center;
...
}
I am trying to have three images centered in a row and then centered on the page. I've got them all in a row but I cannot get them centered. Any suggestions on getting my group to the middle? I tried 0 auto on the contain class and on the social class. so close!!
My HTML: first thing is div class=contain to wrap the whole thing, but for some reason if I try to include the class contain in HTML it disppears on Stack Overflow so excuse that.
.contain {
max-width: 960px;
text-align: center;
}
.social {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="contain">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
What I would recommend is to make use of flexbox container for the elements.
With flexbox, all you need is three different styles in order to centralise elements both horizontally and vertically:
display: flex;
align-items: self;
justify-content: center;
Note that you'll also need to set a height on the container, so that the elements can actually fill the vertical space.
This can be seen in the following, with a border added to showcase the area that the .container element occupies:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px;
border: 1px solid black;
}
.social {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="container">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Hope this helps! :)
html
<div class="content">
<div>
<img src="facebook.png" alt="" width="75" height="75"/>
</div>
<div>
<img src="twitter.png" alt="" width="75" height="75"/>
</div>
<div>
<img src="instagram.png" alt="" width="75" height="75" />
</div>
</div>
css
.content {
text-align:center;
}
Maybe you can edit the css file, remove the float:left; :
.contain {
max-width:960px;
text-align:center;
}
.social {
position:relative;
display: inline-block;
padding: 10px;
}
<div align="center">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png"
alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Using flex is a great solution, but here's a solution that uses what you already have. By removing float: left from your existing code we can get the desired result.
.contain {
max-width: 960px;
text-align: center;
}
.social {
display: inline-block;
padding: 10px;
}
<div class="contain">
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/facebook.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-content/uploads/2017/12/twitter.png" alt="" width="75" height="75" />
</div>
<div align="center;" class="social">
<img src="http://theinvicto.com/wp-
content/uploads/2017/12/instagram.png" alt="" width="75" height="75" />
</div>
</div>
Keeping your current code, simply remove the flex: left: (JSFiddle example):
.contain {
max-width: 960px;
text-align: center;
}
.social {
position: relative;
display: inline-block;
padding: 10px;
}
If based on your browser compatibility requirements you can afford to use display: flex; (MDN) then that's the easiest way (jsfiddle example):
.contain {
display: flex;
justify-content: center;
}
.social {
padding: 10px;
}
There's an excellent flexbox tutorial here: flexbox froggy. Floats are pretty strange and I personally find flexes much more intuitive.
New to writing code and need help stacking images on top of one another.
I am trying to stack an image on top of another (that I wish to have as my background) with a right align.
<div class="container-fluid" id="special">
<section id="fourth">
<img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
<img src="website/bg-services.jpg" alt="Greenteriors Moss Art" size="cover" width="100%" height="100%" id="services-background">
</section>
</div>
I lack the CSS prowess to even attempt to write the code. What currently happens is the img-services stacks on top of bg-services with a right align. I need the first image stacked on top of the second.
Appreciate any help.
here's a jsfiddle for an identical project with more images: http://jsfiddle.net/kizu/4RPFa/4570/
jsfiddle is a great free tool to play around with code and see how changes work out
so you'd be using an inline-block helper and setting height to: 100% and vertical-align: middle on both elements.
<div class="container-fluid" id="special">
<section id="fourth">
<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg"
alt="Greenteriors Moss Art" width="40%" height="40%" align="right"
id="services">
</div>
<div class=frame>
<span class="helper"></span> <img src="website/img-services.jpg"
alt="Greenteriors Moss Art" width="40%" height="40%" align="right"
id="services">
</div>
</section>
</div>
i've added extra div's around your elements. now you just need to add this to the css file to tell it what to do with those new divs:
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap; /* this is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
you'll want to play around to make it look how you want. change the height and width. prob remove the border
#fourth { background-image: url('website/bg-services.jpg'); background-size: cover; }
<div class="container-fluid" id="special">
<section id="fourth">
<img src="website/img-services.jpg" alt="Greenteriors Moss Art" width="40%" height="40%" align="right" id="services">
</section>
</div>
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>