I'm trying to center the newsslider (in the div bottom-container) on this page:


I already have text-align: center;

Still it does not work.

Any suggestions?

Solution 1

The text-align: center; only centers the element's inline contents, not the element itself.

If it is a block element (a div is), you need to set margin: 0 auto;, else if it is an inline element, you need to set the text-align: center; on its parent element instead.

The margin: 0 auto; will set top and bottom margin to 0 and left and right margin to auto (of the same size) so that it automagically puts itself in the center. This only works if the block element in question has a known width (either fixed or relative), else it cannot figure where to start and end.

Solution 2

text-align should not be used to center a block element. (except in IE6, but this is a bug)

You have to fix the width of the block, then use margin: 0 auto;

   width: 200px;
   border: 1px solid red;
   margin: 0 auto;


<div id="#block">Some text... Lorem ipsum</div>

Solution 3

One way :

<div align="center">you content</div>

Better way:

<div id="myDiv">you content</div>

CSS for myDIV:

margin:0px auto;

Solution 4

Provided width is set, and you put a proper DOCTYPE,

Try this:

 Margin-left: auto;
 Margin-right: auto;

Hope this helps

Solution 5



Solution 6

i always use

<div align="center">Some contents......</div>

Solution 7

Use text-align: center for the container, display: inline-block for the wrapper div, and display: inline for the content div to horizontally center content that has an undefined width across browsers:

    <!doctype html>
    <html lang="en">
      <style type="text/css">

    /* Use inline-block for the wrapper */
    .wrapper { display: inline-block; }

    .content { display:inline; }

    .container { text-align:center; }

    /*Media query for IE7 and under*/

      .wrapper { display:inline; }

        <title>Horizontal Centering Test</title>


      <div class="container">
        <div class="content">
            <div class="wrapper">
              test text

Solution 8

Try adding this to the style.

margin-left: auto;

Solution 9

Try this:

#bottombox {
background:transparent url(../images/bg-bottombox.png) no-repeat scroll 0 0;
margin:0 auto;

That should center the div in your footer.

Solution 10

Create a table with single row and three columns, set left and right width to 100% and voila, the middle one gets centered automatically