I would like to create a page on my website where there are 5 inline images which are automatically resized with the browser so they would be in the same position but just resized when viewed on any screen size.
Currently i have it working in such a way that there are 5 images all inline with each other and they do squeeze and keep their aspect ratio when i change the browsers size, but my question is how do i make this line of 5 images be central on the page at all times without them changing their position to go below eachother?
I have tried to add margin:0 auto; to both my container which is #images and to my img {} but neither seem to work,
Here is my current CSS;
#images {
margin-top:400px;
}
img {
width:18%;
padding-left:2px;
position:relative;
}
Here is HTML;
<div id="images">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
</div>
Thanks for any help
To help you understand more here is a JSfiddle showing what i currently have, all i would like is the row of images to be centered at all times, http://jsfiddle.net/c26NJ/
See this FIDDLE
#images {
margin-top:400px;
width:100%;
text-align:center;
}
img {
width:18%;
padding-left:2px;
position:relative;
box-sizing:border-box;
}
Set either width or height css property in % and set the other one as auto, for example
.imageGallery
{
width:20%;
height:auto;
display:inline; // or try float:left
}
This might work (assuming the #images is inside a full-width section):
#images {
max-width: 100%;
width: 400px;
margin: 400px auto;
}
img {
width:18%;
padding-left:2px;
}
HTML:
<div id="images">
<img src="images/imagepage/200x2001.jpg" class="first">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
<img src="images/imagepage/200x2001.jpg">
</div>
and
CSS:
#images {
width: 100%;
}
#images img {
width: 19.6%;
float: left;
display: block;
margin-left: 0.5%;
}
#images img.first {
margin-left: 0;
}
Check this fiddle
In the above fiddle the images will remain in the same line no matter to how much extent the user resizes the window.
CSS
html,body{
width:100%;
height:100%;
margin:0px auto;
padding:0px;
text-align:center;
}
#images {
display:inline-block;
width:100%;
}
img {
width:18%;
padding-left:2px;
position:relative;
display:table-cell;
}
Related
I have a image whose size varies and an icon. I want align the icon horizontally to the image like this:
UPDATE:
Add a jsfiddle example: http://jsfiddle.net/p20qj06u/ . I replaced the icon with <div class="icon">icon</div>. I have to keep the image in this position(floating to right), then put the "icon" in middle of the image.
Given the requirements you can add both images in one container you
can call .img-wrapper
Apply clear:both; to the whole container .img-wrapper which is
float: right.
Then display:block; on the icon and margin:0 auto;
DEMO http://jsfiddle.net/a_incarnati/p20qj06u/2/
.container .img-wrapper {
float: right;
}
.icon{
clear:both;
display:block;
margin:0 auto;
}
.container .img-wrapper {
float: right;
}
.icon{
clear:both;
display:block;
margin:0 auto;
}
<div class="container">
<div class="img-wrapper"><img src="http://7xi5mk.com1.z0.glb.clouddn.com/FivlNV1GzShuj6lGpdCNip_6BYP8" alt="" />
<img class="icon" src="http://placehold.it/20x20" alt="" />
</div>
Put the icon inside the image's div and set the icon margins to auto.
<div class="image">
<div class="icon"></div>
</div>
.icon {
Left:0;
Right:0;
Margin-left:auto;
Margin-right:auto;
}
You should be able to center the icon with
text-align: center;
Unless the containing element isn't set to
display: block;
If that doesn't solve it, I suggest providing a snippet of an example so that we can clearly see the issue and how to resolve it :)
Create one div as container. Center content, set container width (% or px).
UPDATE: (with float: left;) https://jsfiddle.net/sa1axf46/2/
html
<div class="container">
<img src="#" alt="img">
<div class="icon">ico</div>
</div>
css
.container {
text-align: center;
}
.container img {
float: left;
width: 100%;
}
.container .icon {
width: 100%;
}
This question have been asked a lot on the web. But each try don't suceed
For a Website I need to make a header, I'm using django + boilerplate (I think that's boilerplate should be the cause, as copy paste of my code in js fiddle works, while it doesn't on local).
Here is the HTML I use:
<div id="topbar">
<div id="networking">
<div id="title">
EasyMusik
</div>
<div id="logo">
<img src="{% static "img/icons/myzik.svg" %}" />
</div>
</div>
</div>
And here is the CSS:
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
}
#tobbar div{
height: 100%;
display:inline-block;
}
#networking{
padding-left:25%;
}
#networking div{
display:inline-block;
}
#title{
position: relative;
height:100%;
font-size: 24px;
}
#logo img{
width:100%;
display:block;
float:left;
}
#logo{
position: relative;
height: 100%;
padding-left:15px;
background-color : #FF0000;
}
And I got this result
I want the Red area to fullfill the green one. Wich property should i add/remove to achieve that?
EDIT: Finally managed to get a fiddle:
Fiddle here
This did the worked for me. Though its not your CSS.
CSS:
.parent
{
width:100%;
background-color:Green;
height:50px;
text-align:center;
font-size:24px;
}
.sub
{
width:50px;
background-color:Red;
height:50px;
display: inline-block;
}
.img
{
vertical-align:middle;
padding-top:15px;
}
HTML:
<div class="parent">
Easy Muzik
<div class="sub">
<img alt="" class="img" src="style/img.png" />
</div>
</div>
Give #topbar a height. If you want your child container to be 100% height or width, your parent container has to have a height or width specified. Good luck!
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
height: 200px
}
Well, I have created a jsfiddle snippet as follow
link to jsfillde
here is the code
html
<div id="container">
<div class="media">
<img src="http://i.minus.com/i3qPeX4FjQRFt.jpg"/>
</div>
</div>
css
#container {
position:relative;
width:400px;
height:320px;
background-color:#efefef;
}
.media {
wight:100%;
padding:2px;
background-color:#a0a0a0;
position:absolute;
bottom:0;
}
.media > img {
width:100%;
height:auto;
}
The purpose of this is to show an image on the bottom of #container. But as you can see, the media class has an extra "4px" on its bottom and I have no idea why. It completely destroys the view .. Please help.
Add vertical-align:bottom to your image's CSS:
.media > img {
width:100%;
height:auto;
vertical-align:bottom;
}
jsFiddle example
For the life of me I cannot get why this logo is not centering. Please help!
<div id="header" style="width:100%;" >
<img id="logo" src="images/logo384x80.png"/></div>
and the CSS
#header {
background-color:#222222;
height:50px;
margin-left:auto;
margin-right:auto;
}
You can try using text-align: center style on the div. I prefer using classes and use classes in CSS to add styles to elements. So I will do something like this, adding a class to div something like: "logo" and set following CSS:
.logo {
background-color:#222222;
height:50px;
margin:auto;
text-align: center;
}
or for your case:
#header {
background-color:#222222;
height:50px;
margin: auto
text-align: center;
}
It works if you give the width as a "value" rather than a percentage of a non existing object, i.e. there is nothing surrounding the so its width of 100% means nothing.
Change it to lets say, 20em, and you will see the difference:
<div id="header" >
<img id="logo" src="http://www.beyondsecurity.com/assets/img/beyond-security-logo.png"/></div>
#header {
background-color:#222222;
width: 20em;
height: 50px;
margin-left:auto;
margin-right:auto;
}
In my page, the top left image which is logo2.jpg shifts to right, and I want it to be at the same line of menu that is below it. How can I do that?
The page is here, if it helps:
http://www.dilyurdu.com
#logo {
margin:0 auto; width: 975px; position:relative;
}
#top {
position:relative; top:0px; left:0px; width:100%; height:95px;background:url("vocab_dosyalar/back2.jpg") top repeat-x;
}
#logoicerik {
position:absolute; top:2px;
}
#logoicerik2 {
position:absolute; top:2px; left:357px;
}
<div id="top">
<div id="logo" >
<div id="logoicerik"><img src="vocab_dosyalar/logo2.jpg" alt="easylang" style="border:0px;"/></div>
<div id="logoicerik2"><img src="vocab_dosyalar/slogan.jpg" alt="the easiest way to learn english"/></div>
<div class="header-info" style=" margin-right:1px; margin-top:15px" ></div>
</div>
</div>
your container class has width: 960px but your wraper(sic) class has width: 990px
so you need to make sure they both have the same width: I'd recommend making both 990px by changing the width of container
.container {
WIDTH: 990px;
}