i have a problem using css.
.ventabotones div{
float:left;
margin-right: 3%;
}
.ventabotones{
overflow:hidden;
}
.ventabotones{
height:80px;
border: 1px solid;
border-radius: 10px;
}
How could center horizontally #ventabotones content?
use this code in css div you want to center on paginal
margin : 0 auto;
just add this to your css.
.ventabotones{
text-align:center;
}
and if it still doesn't come in center, possible reasons
your container doesn't have enough width to show the content in center
some global CSS Class is overriding the local CSS Class
that's all that can be said without a glimpse of your html markup
Related
I tried centering my h1 in the body tag like this:
h1 {margin:0 auto}
http://jsfiddle.net/qPDwY/
But it doesn't center. How do I fix it?
In this case:
h1 {
text-align:center;
}
jsFiddle example
The margin:auto rule is used when you set a width on the element, which you haven't done.
You can center it by setting the width.
h1 {
width:500px;
margin: 0 auto;
background: gray;
text-align: center;
}
<body>
<h1>My Title</h1>
</body>
text-align: center is best choice but if you still want to center it using margin: 0 auto you have assign some width to H1 (a block) element.
You can center a block-level element by giving it margin-left and
margin-right of auto (and it has a set width, otherwise it would be
full width and wouldn’t need centering). That’s often done with
shorthand like this:
.center-me {
margin: 0 auto;
}
Source:
https://css-tricks.com/centering-css-complete-guide/#horizontal-block
Alternatively, you could try this:
h1 {
text-align: center;
margin: 0px auto;
display; block;
}
-div style="margin:0 auto; text-align:left; width:80px;"-
sample
change the width to change the position
What j09691 said does work, but not all the time.
This is why I use:
/* Put this inside element/class. */
transform: translateX(400px);
If it doesn't fit in the center of the screen for you, just adjust it.
Of course, you could use some css and/or js magic to automatically adjust it.
I am using jquery mobile for my mobile app but have been having issues getting my image to be centered properly. As you can see from the image, there is more white space to the left of the image compared to the right side. This is happening consistently for all images on the page.
For more information, pictures that are not as wide appear to be centered but I'm sure there is some difference in the spaces to the left/right of those images as well. It's just for the wider images that this becomes obvious.
Any advice on how to fix this?
$("#allpictures").append('<div class = "img_center"><div><img src = "'+item.url+'"></div></div><p style = "margin-left:10px; margin-right:10px; font-size:15px;">'+item.title+'</p><br/>');
<style>
.img_center {
text-align:center;
}
.img_center * {
margin: 0 auto;
}
</style>
Use this CSS, and remove the inline style attribute on the <p>.
.img_center{
text-align: center;
width: 100%;
}
.img_center img{
display: block;
margin: 0 auto;
}
.img_center p{
margin: 10px;
font-size: 15px
}
HTML in .append:
$("#allpictures").append('<div class="img_center"><img src="'+item.url+'"></div><p style="margin-left:10px; margin-right:10px; font-size:15px;">'+item.title+'</p><br />');
I have a question about the scrollbar that appears when it does not fit.
For example here I have one news item. Below a screenshot of the layout:
And when you add more items the scrollbar will appear over the date.
It's default behauviour for a scrollbar to appear inside a div, but is it possible to
apply css when the scrollbar appears inside. For example I could use a padding-right: 16px;
to the container. The only problem then, is another container is floated to it and these are inside a big container then the layout would collapse because of the extra padding.
Is there another way to keep the layout without breaking apart?
Here is the link: http://jsfiddle.net/EANbh/
and the css to the container:
.container {
width: 200px;
height:200px;
border: 1px solid grey;
overflow-y:auto;
overflow-x: hidden;
/*padding-right:16px;*/
}
Regards, Chris.
Another option without using the padding is:
.item {
display:inline-block;
width:184px;
height: auto;
border-bottom: 1px solid grey;
}
I have looked around for this and it seems simple but i cant seem to work it out.
I have a div with a background.
I want the background to start 20px down and then repeat-y, as in repeat the rest of the way down.
<div class="main_col"></div>
.main_col {
width: 680px;
float: left;
background:#fff;
background-position:50% 50%;
}
This is what im trying but it is filling the whole div?
this is what i have tried....http://jsfiddle.net/uzi002/gqqTM/4/
You cannot do this with one class definition in current CSS2 standards.
Use a separate div for the background.
If you want to fiddle with some CSS3, you can check out
background-origin
at
http://www.css3.info/preview/background-origin-and-background-clip/
Be aware of browser support.
You might try to add padding-top: 20px to .main_col and inside it create additional div with this background.
.main_col {
width: 680px;
float: left;
background: url("your image") 0px 20px;
}
Update
this is using giker s example
try something like this
There are 3 CSS properties relevant to achieving this:
background-image { url(/myBackground.png) } // To select the image
background-repeat { no-repeat } // To choose how or if it repeats
background-position { 1px 1px } // To choose the X, Y coordinates of the top left corner of the background image in relation to the top left corner of the element.
Now, that's all quite verbose but it can be condensed into a single rule, as follows:
background { url(myBackground.png) no-repeat 1px 1px }
It is possible to use relative values (such as the % which your code shows) for the background-position, but you will need to use px.
Try using a margin padding.
i.e.
.main_col {
width: 680px;
float: left;
background:#fff;
background-position:50% 50%;
padding-top:20px;
}
How can I get an image to stretch the height of a DIV class?
Currently it looks like this:
However, I would like the DIV to be stretched so the image fits properly, but I do not want to resize the `image.
Here is the CSS for the DIV (the grey box):
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
}
The CSS being applied on the image:
.product{
display: inline;
float: left;
}
So, how can I fix this?
Add overflow:auto; to .product1
In the markup after the image, insert something like <div style="clear:left"/>. A bit messy, but it's the easiest way I've found.
And while you're at it, put a bit of margin on that image so the text doesn't butt up against it.
Assuming #John Millikin is correct, the code
.product + * { clear: left; }
would suffice to do the same thing without forcing you to manually adjust the code after the div.
One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.
Here's how the class should look:
.product1 {
width: 100%;
padding: 5px;
margin: 0px 0px 15px -5px;
background: #ADA19A;
color: #000000;
min-height: 100px;
overflow: hidden;
}
This looks like a job for clearfix to me ...
Try the following:
.Strech
{
background:url(image.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
width:500px;
height:500px;
}
display:inline
float:left
is your problem
Floating makes the parents width not be stretched by the child, try placing the image without the float. If you take the float off, it should give you the desired effect.
Another approach would be to make sure you are clearing your floats at the end of the parent element so that they don't scope creep.
Update: After viewing your link Your height issue as displayed, is because the floats are not being cleared.