This block of css controls the position of some 3rd party images. They are generated on the fly as a javascript slider. I need to center it based on another image else where on the page. I know the left and right dimensions of my reference image. All I need to do is figure out how to center this block on that. Is there a way to center this between say 200px and 800px?
.pagination {
display: block;
margin:26px auto 0;
width:400px;
margin-left: auto;
margin-right: auto;
left: 130px;
position:relative;
text-align: center;
}
If you know the width is 400px (as per your snippet), you could do:
.pagination {
display: block;
margin: 26px auto 0;
width: 400px;
}
Example at http://jsfiddle.net/Ne9jz/
Related
I am making a grid of logos for a client's site. I am wondering how to make them centered within the grids in rows and columns. I have for css:
.center-block {
display: block;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
let me know if any solutions exist.
If you want the logo centered horizontally you can do something like this and replace .center-me with your class for the element you want centered.
if it's a block element do this.
.center-me {
margin: 0 auto;
}
if it's inline (text or links) do this
.center-me {
text-align: center;
}
I struggled for some time with this issue. My landscape images looked great but I couldn't get my portrait orientated images to align properly. This is the code I had and the auto margin and padding seemed to have no effect at all and the image would always align to the left of the slider (parent element).
.slider img#portrait {
min-height: 100%;
width: auto;
margin: 0 auto;
padding: 0 auto;
}
I managed to find little snippets of what might solve the problem from different sources so I wanted to include all of the ones I used here in one place.
This is now what I have which works well:
.slider img#portrait {
height: auto;
width: 50%;
display: block;
float: none;
position: relative;
margin: 0 auto;
padding: 0 auto;
}
Images are by default displayed as inline-block elements. So change this to display: block;
If there is a float: left; then the rulemargin: auto; will have no effect either, so set float: none;
The margin auto will have no effect either unless the image has a set width so width: 50%;
And don't forget to set position: relative;
If you are not modifying the display property of images then you can use: .slider {text-align: center;}. (Only works if applied to parent element.)
I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
I need to set image in the middle of the element.
Example of my CSS:
.main {
width: 600px;
position: fixed;
left: 50%;
margin: 100px -300px;
background-color: green;
}
.main .image-holder {
width: 100%;
display: block;
}
.main .image-holder img {
margin: 10px auto;
}
.main has fixed width, but also that size is dynamically changable in the jQuery.
.image-hodler should be something like a thumbnail. I set width to the 100% because, I never know, what size will main element have.
img and here that margin setted as auto doesn't work.
JSFIDDLE
Just add 'text-align: center' on the parent div, like so : http://jsfiddle.net/bj6meje0/1/
.main .image-holder {
width: 100%;
display: block;
text-align: center
}
Or you can change the image behavior to display as block, in html the image is like an 'character' so you can do:
.main .image-holder img {
display: block;
margin: 10px auto;
}
Fiddle : http://jsfiddle.net/bj6meje0/2/
The difference? With the second aproch you will be able to change the "text-align" property of the div, otherwise the text will appear centered as the picture
I want to make a perfectly centered/responsive div.
How would I go about that? Typically to move things I float them or use position: absolute;, but I would like to do so in relation to the browser window as opposed to just generally moving things around.
This will center the div horizontally:
#yourDiv {
margin: 0 auto;
}
You can use margin: auto; along with absolute positioning for responsive vertical/horizontal centering:
<section></section>
section {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #f4d4c4;
height: 100px; /* The only caveat is there needs to be a height defined */
margin: auto;
width: 100px;
}
Example: http://jsfiddle.net/uLDVM/
Here s fiddle that centers it both horizontally and vertically
div {
width: 100px;
height: 100px;
border: 3px solid red;
margin: 50% auto;
}
This is what I use.
.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
The best method using CSS would be to use margin and a max-width to control its width. Like this:
div {
max-width: 50px;
margin: 0 auto;
}
Now to change its value on the browser resize, either use media query or you can use %.
Media Query
#media only screen (max-width: 800px) {
// change the properties if the screen is no
// larger than 800px in width
}
Percentage
div {
max-width: 5%;
margin: 0 auto; // will only align it horizontally
}
You can use position: absolute and then use 0 for each four sides of it. To keep it centered and strecthed to the borders, while it won't strecth because of max-width.
This way, you will have the div centered and responding to the browser.