I have a group of 4 images that I'm trying to align vertically and horizontally.
The problem:
I cant get ride of a a small vertical spacing between them.
Please check out the issue reproduced in Fiddle
html:
<div>
<ul>
<li> <img src="http://placekitten.com/100/100" alt="">
</li>
<li> <img src="http://placekitten.com/100/100" alt="">
</li>
<li> <img src="http://placekitten.com/100/100" alt="">
</li>
<li> <img src="http://placekitten.com/100/100" alt="">
</li>
</ul>
</div>
css:
* {margin:0; padding: 0;}
div {width: 200px; height: 200px;}
ul {
list-style:none;
}
ul li {
display: inline-block;
float:left;
}
It seems pretty simple, but I haven't been able to get ride of spacing other than manually specify the height to 100px, which isn't responsive and so not viable.
Adding vertical-align:top on the img elements will remove the gap. The default is baseline.
As a side note, bottom and middle work too.
jsFiddle example
img {
vertical-align:top;
}
Adding display:block to the img elements works too. (example)
img {
display:block;
}
Try
margin: 0 auto;
border: 0px;
If you don't have text in this you can just say
ul {
font-size: 0;
}
This eliminates the space, see modified JSFiddle
Related
I am creating an unordered list that contains images and text, and would like each item to be 1/3rd the width with a margin, evenly spaced. I can't figure out how to ensure, in a responsive website, the items are always exactly 1/3rd the width, including margins. Percentages seem to not remain consistent across browsers.
HTML
<ul>
<li><img>Text</li>
<li><img>Text</li>
<li><img>Text</li>
<li><img>Text</li>
<li><img>Text</li>
<li><img>Text</li>
</ul>
CSS
ul {list-style:none; text-align:center; margin:0;}
ul li {display:inline-block; zoom:1; *display:inline; vertical-align:top; width:32%; margin:10px 1%;}
If I want two rows of three columns here, it will sometimes look fine and other times push the third item down to the next row--almost as if some browsers are adding a pixel or two somewhere. Is there CSS that I can use to just space it evenly across the entire width of the parent element?
Note that the site is responsive so calculating exact pixels isn't going to work. I'd also rather avoid writing separate CSS for different browsers, if possible.
There's a couple of ways to tackle this, but the easiest CSS solution is to use inline-blocks for the li elements. Now the issue with inline-block is, they will take whitespace into account, breaking your layout, but there are two easy solutions for this in the markup:
HTML comments between the li elements;
Compressed HTML code.
Example with HTML comments:
<ul>
<li><img>Text</li><!--
--><li><img>Text</li><!--
--><li><img>Text</li><!--
--><li><img>Text</li><!--
--><li><img>Text</li><!--
--><li><img>Text</li>
</ul>
Example with compressed HTML:
<ul><li><img>Text</li><li><img>Text</li><li><img>Text</li><li><img>Text</li><li><img>Text</li><li><img>Text</li></ul>
For the CSS, this should do the trick (you can modify the width of the 'columns' in media queries).
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
width: 50%;
}
#media screen and (min-width: 20em) {
li {
width: 33.33333%;
}
}
Another thing to note is that you can't use margins on the left and right of these items, as they will not be part of the original width, but you can use padding on the inside to "space" elements apart. This is also how some of the repsonsive grid systems are built (a little more advanced, but same principle).
Here's the live code: http://codepen.io/TheDutchCoder/pen/zxxwom
Here is a cross-browser solution. I have added an html5 structure if you need to include images in your list.
/* the two following properties modify the box-model so that padding is removed from the width instead of being added */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul:after { /* to clearfix your ul list */
content: "";
display: table;
clear: both;
}
ul li {
display: block; /* inline-block have an extra 4px margin wich makes it harder to use in this situation */
width: 33.3333333%; /* You get it (100/3) but use exact number */
padding: 10px 5px;
float: left; /* if you use block elements you have to float them */
text-align: center;
}
figure {
margin: 0; /* to normalize figure element */
}
figure img {
max-width: 100%;
max-height: 100%;
}
<ul>
<li>
<figure>
<img src="http://placehold.it/500x500" />
<figcaption>Text</figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://placehold.it/500x500" />
<figcaption>Text</figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://placehold.it/500x500" />
<figcaption>Text</figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://placehold.it/500x500" />
<figcaption>Text</figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://placehold.it/500x500" />
<figcaption>Text</figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://placehold.it/500x500" />
<figcaption>Text</figcaption>
</figure>
</li>
</ul>
Try this: http://jsfiddle.net/j13889cx/
I've added a div element wrapping everything inside each li element called .ul-wrap.
This allows you to add any margin/padding you'd like because .ul-wrap is a block element.
Try changing .ul-wrap's margin or padding.
I am trying to align vertical some text in a div here:
HTML:
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px">
</div>
<div class="div12">
yo
</br>
yo
</div>
</div>
CSS:
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
}
.div12 {
padding-top: 5px;
}
JSFiddle:
http://jsfiddle.net/4mVPG/1/
The height of my divs is fixed so all I want to do is set up a padding-top on the last div (.div12) to move the text down a bit. However when I add a padding-top all the box are brought down.
Why is this happening and how can I fix this? Thanks
When you use inline-block, each block acts as if it where text that gets alined (by default) on the baseline. If you increase the height of the second block, the baseline goes down, and the first block as well.
You can use vertical-align: top to change this.
Just replace CSS with this:
.div1 {
height: 40px;
}
.div1 > div {
float: left;
}
.div12 {
padding: 0 0 0 3px;
}
The div1 div selector also applies to all descendants so using > only applies to first one. Also if container is height fixed i think it's better to use float.
JSFidle
Hope it helps!
You can use ".div1 div {display: inline-block;vertical-align: top;}" and there is no need for .div12 { margin-top: 30px; } since you want both aligned top and no extra space on top of "Text div"
Also, just for a better practice, avoid using "<br>" tag, there are many "Block" tag like, <div>, <p> etc. and if there are list of "links" use "<ul><li>" and you can control the margins and spaces with CSS.
Here is the updated code :
HTML
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px"/>
</div>
<div class="div12">
<ul>
<li>yo
</li>
<li> yo
</li>
</ul>
</div>
</div>
CSS
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
vertical-align: top;
}
.div12 ul,
.div12 li{
margin:0;
padding:0;
list-style:none;
}
Working Fiddle for the same: http://jsfiddle.net/PK3UU/
Hope this is helpful!!!
Is it what you want ? http://jsfiddle.net/4mVPG/4/ i cleaned up css a little bit
div {
height: 40px;
display: inline-block;
vertical-align:middle;
}
and for html
<div class="div11">
<img src="http://placekitten.com/40/40" alt="" width="40px" />
</div>
<div class="div12">
yo
<br />
yo
</div>
I want to make a nav bar using images but still have text under each image, yet I also want the text to be centered.
I have the following HTML
<div class="whatwedo-wrapper" id="whatwedo">
<div class="whatwedo">
<ul>
<li>
<img class="services" src="images/Brand-Online-Circle-Blue.png" width="200px"
onmouseover="this.src='images/Brand-Online-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Online-Circle-Blue.png'">
<br>
Brand Online
</li>
<li>
<img class="services" src="images/Brand-Marketing-Circle-Blue.png" width="200px"
onmouseover="this.src='images/Brand-Marketing-Circle-Grey.png'"
onmouseout="this.src='images/Brand-Marketing-Circle-Blue.png'">
<br>
Brand Management
</li>
</ul>
</div>
</div>
and I have made what I have a jsfiddle here - http://jsfiddle.net/B7sdp/
The overall outcome I am looking for is for the images to be centered and the text to be underneath its image, also centred.
Thanks in advance!
You should add text-align:center property to your li and replace float:left with display:inline-block
.whatwedo li {
width: 200px;
display:inline-block;
list-style: none;
text-align:center;
}
See example here : http://jsfiddle.net/B7sdp/1/
You need to add text-align: center; to .whatwedo li
.whatwedo li {
width: 200px;
margin: 0 auto;
float: left;
text-align: center;
list-style: none;
}
JSFiddle
I have tried using float left/right, which puts them next to each other but I want them to be evenly spaced from left to right. I tried using padding/margin tags, but they don't work either. Any help would be appreciated!
Code:
<div class="options">
<ul style="list-style:none;">
<li>
<img src="magger.jpg" width="180" height="180"/><br> Do Stuff To His Dog
</li>
<p>
<li>
<img src="me.jpg" width="180" height="180"> <br>Examine His Checkered Past</p>
</li>
<p>
<li>
<img src="wife.jpg" width=180 height=180><br>Sexually Harass His Wife</p>
</li>
</ul>
CSS:
.options li {
float:right;
}
You're over complicating it:
HTML:
<div class="images">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
</div>
CSS:
.images {
text-align : center;
}
.images img {
width : 75px;
height : 75x;
margin : 10px;
}
Demo: http://jsfiddle.net/6VrJR/
add this to your css-code:
ul{
width : 550px;
margin: auto;
}
here is a jsfiddle as well
Define width and auto margin for the UL. Also, give margin and text-align center for the text.
.options ul {
width:564px;
margin:auto;
padding:0;
}
.options li {
float:right;
text-align:center;
margin:0 4px;
}
Here is the jsfiddle: http://jsfiddle.net/EASFG/
Do not use floats:
Instead of using floats for your children elements, let them flow inside an anchor tag. Anchor tags have inline as default display behavior (add display: inline; if you need to use another tag instead).
The trick that centers the links is the container text-align: center; property.
This can be translated in code as follows:
Define your container class
.container {
width: 100%;
text-align: center;
display: block;
margin: auto;
}
Create your HTML structure:
<div class='container'>
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
<img src="http://www.bradfordcityfc.co.uk/images/common/bg_player_profile_default_big.png" alt="">
</div>
Demo: http://codepen.io/manuelro/pen/Abgox
Regards,
M
I need some help centering some images
HTML:
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<br>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
<li>
<a class="thumb" href="#">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" />
</a>
</li>
CSS:
ul.thumbs {
clear: both;
padding-left: 0px;
}
ul.thumbs li {
display: inline-block;
/*float: left;*/
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;
}
a.thumb {
padding: 2px;
display: block;
border: 1px solid #ccc;
}
ul.thumbs li.selected a.thumb {
background: #DAA12F;
}
a.thumb:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
height: 120px;
width: 120px;
margin: 0px auto;
}
I need the images be centered together so that they remained lined up. Ive tried using:
ul.thumbs {
text-align:center;
}
but since there are a different number of images on each row, they move out of alignment
Thanks for the help, this is driving me crazy
EDIT: I thought I found a solution using this as a guide: http://www.tightcss.com/centering/center_variable_width.htm but if the images go over more than row, they no longer center. Originally I put a br tag to break up the rows and that fixes the problem, but a JS library Im using doesnt play nice with br tags between list items. Any suggestions (you can see the issue here http://jsfiddle.net/HvZva/26/)
There is two solutions to this, one is if you want your images to be centered and the another is if your images should be aligned left, but centered on the page.
Center block, left align images
To do this you need to add the following to your css (or see: http://jsfiddle.net/HvZva/20/)
ul.thumbs{
margin:0 auto;
width:416px;
}
what I do is basicly to tell the browser that this un ordered list should have an equal margin to both sides. But since this object has an width of 100% as standard, we need to specifiy that aswell, and in this case it is 416px.
Center align images
If this is static content, one easy way to do this is to add a div with the class of center that wraps each line, and then adding "text-align:center;" to those divs, that will do the trick.
note: there is one new way to center the block, but aligning the images to the left. but that involves the box flex model and css 3, and it has not yet been implemented by browsers yet
Applying text-align: center; to .thumbs.noscript ul fixes it in the jsfiddle
You can give the parent element a width and apply margin-left: auto; margin-right: auto;
http://jsfiddle.net/HvZva/13/
ul.thumbs {
display:inline-block;
text-align:center;
}
Something like this? http://jsfiddle.net/HvZva/11/
I may have mis interpreded your issue but is it something like this you want?
http://jsfiddle.net/HvZva/12/