There are two approaches to centering a column <div> in Bootstrap 3: Approach 1 (offsets): The first approach uses Bootstrap’s own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a … Read more
Giving the div text-align: center should work. (You may have to add align=’center’ as a property for it to work in IE6, though.) Note: As pointed out by @streetpc, this method will not work properly if the image is wider than the container. Alternatively, you could also have the image as a background image: background-image: … Read more
Assuming the element which is floated and will be centered is a div with an id=”content” … <body> <div id=”wrap”> <div id=”content”> This will be centered </div> </div> </body> And apply the following CSS: #wrap { float: left; position: relative; left: 50%; } #content { float: left; position: relative; left: -50%; } Here is a … Read more
Because translateX(-50%) moves something back to the left 50% (because of the – negative value), which means it pairs with left: 50%; to center something. If you want to use right: 50%; then use that with translateX(50%) to center. * {margin:0;} span { position: absolute; top: 50%; right: 50%; transform: translate(50%,-50%); background: black; color: white; … Read more
The best solution I’ve ever encountered is to make use of the display property and set the wrapper element as a table to allow the usage of vertical-align:middle on the element to be centered: See this working Fiddle Example! HTML <body> <div> <h1>Text</h1> </div> </body> CSS body {width: 100%; height: 100%;} /* this is just … Read more
You can apply this CSS to the inner <div>: #inner { width: 50%; margin: 0 auto; } Of course, you don’t have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering. If you are targeting Internet Explorer 8 (and later), it … Read more
My understanding is as follows (though I am happy to be corrected). Inline elements do not have a width property, and so the “auto” cannot be calculated. Block elements have a width property, so the width of the “auto” can be calculated. Inline-block elements have an outside which acts inline, but an inside which acts … Read more
The answers here are outdated. Now you can easily use a CSS3 transform without hardcoding a margin. This works on all elements, including elements with no width or dynamic width. Horizontal center: left: 50%; transform: translateX(-50%); Vertical center: top: 50%; transform: translateY(-50%); Both horizontal and vertical: left: 50%; top: 50%; transform: translate(-50%, -50%); Compatibility is … Read more
I know this is a couple of years old, but I’ll add my thoughts after some investigation in to issue while writing a reset stylesheet for a project. NOTE** This is based on looking through the Firefox source because it was the easiest to obtain and read through. However, based on similar behaviour in other … Read more
The solution, if your list items can be display: inline is quite easy: #footer { text-align: center; } #footer ul { list-style: none; } #footer ul li { display: inline; } However, many times you must use display:block on your <li>s. The following CSS will work, in this case: #footer { width: 100%; overflow: hidden; … Read more