Center <div> with Auto:Height

how center align <div id="banner">? has auto:height because different sizes on each page. current css follows...thank you!

 

#banner span {

          display: block;

          position: absolute;

          bottom: -38px;

          left: 48%;

          margin-left: -48px;

          height: 60px;

          background-color: #333333;

          border-radius: 10px;

          padding: 4px;

}

 

 

#banner span p {

          text-align: center;

          height: 50px;

          background-color: #1d4e59;

          line-height: 52px;

          border-radius: 9px;

          font-size: 38px;

          color: white;

          font-family: 'bebas_neueregular';

          padding-right: 10px;

          padding-left: 10px;

}

don't use position:absolute.  don't need positioning or explicit height values.  default css positioning (static or unspecified) need.  div height naturally determined content inside it.

 

also, not sure why you're using span tags this.  if need center banner image , paragraph, use css width, margins , text-align.

 

css:

 

     #banner {

     width: 900px;

     margin:0 auto; /*with width, centered on screen*/

     }

 

     #banner p {

     margin:0;

     padding:0;

     text-align:center;

     }

 

 

html:

 

     <div id="banner">

         <img src="your_banner.jpg" alt="banner" width="900"  height="100" />

          <p>this text centered</p>

     </div>

 

 

nancy o.

More discussions in Dreamweaver support forum

adobe