I have read lots of similar questions and tried to apply the answers by adding divs with position:absolute and relative aroudn the images to the code but I cannot get it to work.
http://store9711.americommerce.com/milk-glass-vases-and-candle-holders.aspx
I need to bottom align these thumbnails while keeping them horizontally centered
Is anyone able to show me how?
You will need to use the vertical-align property
CSS
.category-product .thumbnail img {
display: inline;
vertical-align: bottom; /*Add this line*/
}
.category-product .thumbnail{
display:block;
}
Also give display:block to the anchor tag to keep the image horizontally center.
.category-product .thumbnail img {
display: inline;
vertical-align: bottom; /*add this*/
}
The default Bootstrap setup (line 7 of bootstrap.min.css) on your site aligns to middle (applied to img HTML element). You'll just need to override for the category images.
Related
I am trying to centre the nav-bar links. But sadly i haven't had much luck so far. I've tried to use navbar-justified but that just throws every thing out of proportion.
here is the code.
I assume you wanted to center everything to the center. The easiest way is to use display: inline-block and then text-align: center on the parent element. Then also reset float to use the default aligment:
See you updated demo: http://www.bootply.com/iu9NOXfmEV
Make the container inline-block to get the width of the content, and align the navbar elements. To get rid of the gap underneath use vertical-align: top.
To avoid changes when collapsed add media query:
#media (min-width: 768px) {
.navbar {
text-align:center;
}
.navbar .container-fluid {
display: inline-block;
vertical-align: top;
}
}
You can see here
I want to simply center 2 divs horizontally regardless of the screen width and without using a wrapper. I have the following simple code:
#div1 {
display: inline-block;
width: 100px;
border: 1px solid #000000;
}
#div2 {
display: inline-block;
width: 200px;
border: 1px solid #000000;
}
I created the following fiddle for illustration:
http://jsfiddle.net/axe89/
The reason I don't want to use a wrapper is that I want to make a cross platform website and if I define a width for the wrapper it will break mobile screen.
#setek has the solution above, just wanted to add this quick rule of thumb:
To horizontally center display:inline and display:inline-block items, use text-align:center;.
To horizontally center display:block items, use margin: 0 auto;.
as alluded to by setek, you can define a container for your divs, with a width of 100% so that it scales with the screen/device width. Also set its text align to center to achieve your desired effect.
#container{text-align:center;width:100%;}
here is your updated fiddle
and for slightly modified markup and css - http://jsfiddle.net/axe89/5/
Use css margin properties.
margin-left:40%
to the first div.
You can add
text-align: center;
to the body tag or to whatever you are planning to wrap the divs with.
fiddle link
I tried to center a div horizontal and vertical on the screen, but somehow it is slightly off center. Why is that? I think it is because of the content, but I don't know :D
I used
height:90%;
and
margin-top:5%
to center it.
Here's the full code:
http://jsfiddle.net/7mNue/1/
http://jsfiddle.net/j8tBw/
Cleaned up the markup a bit, and applied display: flex in a parent DIV.container (see links below, specially), and used center flex CSS properties.
.container {
display: flex;
justify-content: center;
align-items: center;
}
.inlineflex {
display: inline-flex;
}
You may face problems in IE10 and below, other browsers are good (see caniuse link)
References:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://caniuse.com/flexbox
Apply margin: auto and set a full size (width & height) on the DIV.
Try this
.popup{
width:100%; // remove this and add below style
max-width:100%;
}
.popup img{
max-width:100%;
}
box-sizing: border-box on items that have margin and padding should sort it out
I have an image with text aligned to the left of it. Both the image and text is sitting inside a div that I have styled to look like a red bubble in the background of the post. The bubble only goes as far as the text and not the image (the image goes down much farther than the text), causing the image to break into other posts. How do I make this div the correct size that can fit anything i put into it (in this case the image)?
jsfiddle: http://jsfiddle.net/Sederu/CzNr6/
Add overflow:auto to your .post-bubble rule.
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
overflow:auto;
}
jsFiddle example
If you want the content to allow anything inside of it, give it overflow:auto.
If you want the bubble to extend so that it also covers the img tag, however, give .post-bubble a height:
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
height:600px;
overflow:auto;
}
The reason why the image extends farther than the div is because the img is taken out of the flow of the page, i.e. no longer being a block element, when you declare align:right.
either add overflow:auto; to your post-bubble div or define a height to the post-bubble div eg.. height: 600px; covers it nicely..
On div tag do a display:block in css
I think the best solution is to force element to self-clear its children.
div.post-bubble:after {
clear: both;
content: '';
display: table;
}
You can also create a specific class for other elements in your project/projects like:
.clear-children:after {
clear: both;
content: '';
display: table;
}
And add this class (.clear-children, without :after) to every element with floated children.
http://jsfiddle.net/CzNr6/4/
I am not sure whether the padding on the bottom (look for the red pixels below the photo) is set on the image, or on the content div, but I want to get rid of it. A jsFiddle of my issue is here: http://jsfiddle.net/FERUs/
Add display: block to your images css:
#picture {
max-height:100%;
max-width:100%;
display: block;
}
More info here.