I want to center(horizontaly) three icons(inline) inside a div by using css. My div is centered inside another div but I want to center the content(the three icons) inside that div.
<div id="browsers">
<div id="browsers-wrapper">
<img src="Images/firefox.png" class="browserIcons">
<img src="Images/chrome.png" class="browserIcons">
<img src="Images/opera.png" class="browserIcons">
</div>
</div>
Also a useful article on centering content with css to understand more about the procedure?
Thank you!
I actually managed to do it myself! I still need to understand the basic around block and inline elements..
Thank you though.
#browsers-wrapper img{
display:inline;
margin:auto;
width: 8%;
height:auto;
}
try this commands , it may works :
#beowser-wrapper img {
margin : auto 0;
display : block;
width : 100%;
}
I recommend to take a look in this tutorial which describing these elements
Learn CSS Layout
And in here You can also look into Inline and block elements that described by picture examples :
What’s the Deal With Display: Inline-Block?
I hope it'l help you enough.
Related
if you could take a look for a moment at http://www.acehbus.com, you could see that the screenshot image of iPhone is fully seen in the screen. I want to know how to make the half of the image overlays the next div like in the http://sociali.st. I have tried z-index but it doesn't work. Thanks you for your help.
I got through your site, and I have two things:
1) dont use images with resolution of 649x1323. Half of that size will ok .. there are many of images of this phone, and people with slower connection will die on this. And it is still used only as smaller thumbs, so large resolutions are really not necessary.
2) You use the image as itself. Use div instead and give image as its background. See this fiddle:
https://jsfiddle.net/8xhucpx8/
div.image{
width:300px;
height:200px;
background-image:url('http://www.acehbus.com/img/search.png');
background-position:top center;
background-size:100% auto;
background-repeat:no-repeat;}
You can do that using overflow: hidden first give a fixed height to the parent element of the image in your case col-md-6. So do something like.
.col-md-6 {
height: 155px;
overflow: hidden;
}
<div class="col-md-6">
<img src="http://www.acehbus.com/img/search.png" alt="" width="200px" />
</div>
First of all, you may always inspect a site with effect you want to achieve and try to apply it's approach in your project. The markup and styles are at direct access. If you noticed in the example you've provided the overlapping effect is achieved with combination of negative margins and absolute positioning. So if you play with these properties you gonna make it. I would go for something like this:
<div class="iphone"></div>
.iphone {
bottom: -100px;
position: relative;
}
Look, I made some experiments and made this fiddle
I need some advice in creating a caption underneath an image, that is aligned to the right hand side. The image will change, so I can't use fixed value margins or anything like that - is this possible without javascript?
This is the basic layout, 'text-align: right' would work if I could somehow force the wrapper div to constrain to the image width, but currently it breaks past this. Any advice?
<style>
#section{height: 74%; padding-left:5%;}
#photowrapper{position:relative;}
#photo{height:100%; width:auto;}
#detailsdiv{position:relative; text-align:right;}
</style>
<div id='section'>
<div id='photowrapper'>
<img id='photo' src=../imgs/banan.jpg></img>
<div id= 'detailsdiv'>banan</div>
</div>
</div>
Maybe an obvious question but it hasn't been asked that I can see.
Just add display: inline-block; to the #photowrapper CSS
#photowrapper{
position:relative;
display:inline-block;
}
Fiddle: http://jsfiddle.net/DyrS9/
You can add display:table-cell (or table,inline-block) to #photowrapper :
#photowrapper{
position:relative;
display:table;
}
Example
I have a responsive image grid background in my website.
All its working fine with perfectly square images but when one image is for example 1px height bigger, the grid breaks.
Example OK:
[H][H][H][H][H][H]
[H][H][H][H][H][H]
[H][H][H][H][H][H]
Example FAIL
[H][H][H][H][H][H]
[H][H][H][A][H][H]
[H][H]
[H][H][H][H][H][H]
I dont want to use mansory o other plugins, this is my code:
HTML
<div class="resp pull-left">
<img class="img-responsive indexUser" src="image.jpg">
</div>
CSS
.resp{
width:10%;
height:10%;
}
.resp img{
width:100%;
}
Im using Bootstrap 3. Is it possible to do it?
EDIT WITH MORE INFORMATION
I want to put only square pictures in order, sorry, without grid. The image containers are floating. This is the screenshot with the problem:
Is responsive and I need to use % in with to adjust perfectly fullscreen allways
There are two things you can try here that might answer your question. Of course, without seeing your code it's very hard to advise in a more in-depth fashion.
If you're using Boostratp, why not wrap each row of images in a row-fluid container and use it's grid system? This will at least ensure that you don't get the dirty float bug, although it also means that you'll get a little extra space underneath the child elements of that one taller one.
Or, set the parent anchor's height and set overflow: hidden. This will essentially cut off the bottom edge of the taller image, although you would have to work through your break points.
As a code example of point two above:
.resp a{
display: block;
max-height: 300px;
overflow: hidden;
}
Bear in mind that images in Bootstrap have max-width: 100% set to them automatically so they will always flow to the width of the container if wide enough.
You will probably need to provide a height and maybe even set overflow:hidden. Please provide more markup if you want a better answer.
This is one linked image in a div, not a grid:
<div class="resp pull-left">
<img class="img-responsive indexUser" src="image.jpg">
</div>
<figure><img src="images/edu.jpg"></figure>
figure img {
width: 100%;
}
I have put together an example bit of code as I am trying to get 2 images of different sizes to be aligned at the top such as shown below:
HTML
<div id="test">
<div class="social-media">
<img src="http://www.ok.gov/ltgovernor/images/Facebook-icon.png" width="120"/>
<img src="http://semanticweb.com/files/2012/01/twitter_logo.jpg" width="50" />
</div>
</div>
CSS
test {
width:980px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.social-media {
position:absolute;
background-color:#000;
right:0;
top:0;
vertical-align:top !important;
}
I realise now after reading a few posts online that vertical-align will not work in divs and solutions have been to use absolute positioning instead. The only issue is that I am already using absolute postioning for the images parent div.
Would it be good practice to do absolutes inside a parent div that is also an absolute.
However if i was to put an absolute positiong on the img then all img's would stack ontop of each other unless I was to specify each and every img with a class.
So my next thought was to put a float on img within the div. I just wanted to know if this is good practice or if anyone can tell me a cleaner way of doing this?
Also, if I were to want the images to be centrally aligned, how would this be done as the float method works in the sense of getting the images to align at the top but I am not sure how I could align centrally or maybe at the bottom?
Put overflow:auto on the social-media div then add float:left to your images.
Keep in mind you can also use negative integers like vertical-align: -1px; to go up -1px
For more details see CSS vertical-align Property and try it out here.
I have a div tag in which there is an image in left corner and in the middle of the div tag I want to write title of my web application. But I am not able to set text alignment in middle of the div tag. I tried text-align,valign properties with various values but could not set it. Can you please guide me how to to this.
CSS for my div tag is as below
#head
{
background-color: #EEE685;
overflow: auto;
width: 100%;
text-indent:10;
text-align:justify;
}
You have to use text-align: center;, see this fiddle: http://jsfiddle.net/alp82/e3hgu/
Applying CSS text-align:center to a block element centers its contents.
<div>
<img alt="" src="images/accessbg.jpg" align="left"></img>
<h2 align="center">Test</h2>
</div>
The above code will work for you.