I feel like I am missing something easy or stupid. This is the only element on my page that I can't seem to center. I cannot seem to centerul#footer.
http://jsfiddle.net/w67rt/
To center the footer contents horizontally, just add the following CSS:
#footer {
text-align: center;
}
Demo: http://jsfiddle.net/mathias/GZ6xh/
If you’re looking to center the entire element, just give it a width and then use margin: 0 auto:
#footer {
width: 400px;
margin: 0 auto;
}
The width of ul#footer is undefined, so it uses the default width of "100%". I tried using width:261px, and then it does center.
I find two solutions:
both here, one is commented:
http://jsfiddle.net/AzNqm/
define width of ul, and center block with margin:auto
center inner li elements
Effect will be the same.
Related
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
.mainCoverWrapper {
position: relative;
min-width:312px;
background:red
}
I'm trying to center a div with min-width of 312px and make it expand according to its dynamic content while keeping it centered.
Right now the min-with doesn't work at all because it needs a float. I can't use a float because I need the div centered on the page.
In other words, div starts out with margin auto with a width of 312px and expands with its added content while being centered. Is this possible?
Any help would be greatly appreciated.
http://jsfiddle.net/FVmvA/
Here's a working example of the parent to follow the width of the child, and the child will expand according to the text given in it.
.myCoverWrapper {
border: 1px solid Peru;
margin:auto;
min-width: 200px;
max-width: 100%;
display: inline-block;
background: red;
}
.test {
height: 100px;
margin: 10px;
background: cyan;
}
This makes the parent div follow the width of the kid.
This however, will disallow you to "center" it. There's no way you can have both. This is because you cant center an image without knowing the width of the element.
The solution is to use jQuery, to add CSS in when necessary.
Here's an example. There's some bugs, but well, you have the general idea.
If you want the width to be fluid, your best bet is to set display: inline-block; on the to-be-centered element, and text-align: center; to the parent element.
See: CSS center display inline block?
The logo image at the top of this page http://54.251.57.136/ should center with:
.logo-img {
margin: 0px auto;
display: block;
}
... but it doesn't and I can't figure out why. Any help would be great.
Take off the float: left from logo-img and add text-align: center
Your div has a class .logo-img which is set to float:left. (and it would need a fixed width for the centering to work)
You are floating the image wrapper, if you adjust your css you can center it:
ADD THIS TO YOUR .logo-img
text-align: center;
REMOVE THIS FROM YOUR .logo-img
float:left;
What do you need to know:
Floated elements get off the normal document flow, so margin:0
auto; does not apply. You need to remove it.
margin:0 auto; on the .logo-img tag is not enough, you need to add
text-align:center; to allow the image to get centered.
Your logo-img class has a float: left
You must declare width on the div if you want it to center automatically with margin: auto. In this case width: 572px
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 8 years ago.
Is there any code or tag which can be used to centralise any HTML element? The only way I know to do this currently is to repeatedly adjust padding and margins (left) to push elements to an approximate centred position. I'm aware you can centralise text, but this doesn't appear to work for other elements such as divs, objects, etc.
To make the content center of the page try to use
body{ margin:0 auto;}
to align text center use
p{text-align:center} or div p{text-align:center;}
By using HTML tag for text
<center>your text goes here</center>
you can create a class on which you can write your css like
<div class="align-center">Your text goes here</div>
.align-center { text-align:center; } or .align-center { margin:0 auto; }
so many ways are present to make the element center, its totally depends on you what layout you are creating and what kind of element you want to make center. Generally by using css we can make our elements center or as per our requirement. If you have any peculiar situation then ask.
In CSS, the code is {text-align:center;}.
You can do this in HTML two ways, though it is not good practice. One is <div align='center'>, and the other is <center>thing to center</center>
For divs try:
body {
text-align: center;
min-width: 600px;
}
#wrapper {
margin:0 auto;
width:600px;
text-align: left;
}
Basically - setting margins to auto on your wrapper div almost always works, and text-align center for the div you'd like to be centered within it.
In html
<center> </center>
works well.
Try margin: 0 auto;
Example:
http://jsfiddle.net/4KuRW/
The best way from my experience to center an element is by setting up the CSS this way:
width: 300px; /* You actually have to set the width! */
margin: 0px auto; /* margin-top & bottom = 0, margin-left & right = auto */
To center the text you simpy use text-align: center;.
I assume you mean: you have a div with id=X, height=H, width=W that you want to center horizontally and vertically relative to a parent container C (i.e. C must have be defined with position: relative)
In your CSS file, you should define the class for X like this:
#X{
position: absolute;
top: 50%;
left: 50%;
margin-left: -(W/2)px;
margin-top: -(H/2)px;
}
In this example the image is not centered. Why? My browser is Google Chrome v10 on windows 7, not IE.
<img src="/img/logo.png" style="margin:0px auto;"/>
add display:block; and it'll work. Images are inline by default
To clarify, the default width for a block element is auto, which of course fills the entire available width of the containing element.
By setting the margin to auto, the browser assigns half the remaining space to margin-left and the other half to margin-right.
You can center auto width div using display:table;
div{
margin: 0px auto;
float: none;
display: table;
}
Under some circumstances (such as earlier versions of IE, Gecko, Webkit) and inheritance, elements with position:relative; will prevent margin:0 auto; from working, even if top, right, bottom, and left aren't set.
Setting the element to position:static; (the default) may fix it under these circumstances. Generally, block level elements with a specified width will respect margin:0 auto; using either relative or static positioning.
In my case the problem was that I had set min and max width without width itself.
Whenever we don't add width and add margin:auto, I guess it will not work. It's from my experience. Width gives the idea where exactly it needs to provide equal margins.
there is a alternative to margin-left:auto; margin-right: auto; or margin:0 auto; for the ones that use position:absolute; this is how:
you set the left position of the element to 50% (left:50%;) but that will not center it correctly in order for the element to be centered correctly you need to give it a margin of minus half of it`s width, that will center your element perfectly
here is an example: http://jsfiddle.net/35ERq/3/
For a bootstrap button:
display: table;
margin: 0 auto;
I remember someday that I spent a lot of time trying to center a div, using margin: 0 auto.
I had display: inline-block on it, when I removed it, the div centered correctly.
As Ross pointed out, it doesn't work on inline elements.
img{display: flex; max-width: 80%; margin: auto;}
This is working for me. You can also use display: table in this case.
Moreover, if you don't want to stick to this approach you can use the following:
img{position: relative; left: 50%;}
put this in the body's css:
background:#3D668F;
then add:
display: block;
margin: auto;
to the img's css.