Wie kann ich meine ein div in einer Tabelle mit CSS zu zentrieren?

StackOverflow https://stackoverflow.com/questions/1042209

  •  22-07-2019
  •  | 
  •  

Frage

Ich versuche, eine Diashow zu einem meiner Websites hinzuzufügen. Die ganze Seite wird in einer HTML-Tabelle legt aus (die ich mit Leidenschaft hasse und nicht wählen). Ich möchte meine Diashow innerhalb dieser paticular Spalte zu zentrieren. Hier ist, was meine CSS wie folgt aussehen: 

#slideshow {
position:relative;
}

#slideshow IMG {
position:absolute;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}

Hier ist meine JQuery-Funktion Bilder zu ändern: 

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Und schließlich ist hier die Diashow div in der Tabelle: 

<td bgcolor="red" align="center" valign="top"> 
<div id="slideshow">
    <img src="2009Slideshow\1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="2009Slideshow\2.jpg" alt="Slideshow Image 2" />
    <img src="2009Slideshow\3.jpg" alt="Slideshow Image 3" />
    etc...
    etc...
</div>                    
</td>

Also, warum nicht ich meine Diashow Mitte innerhalb dieser Spalte?

War es hilfreich?

Lösung

Inline-Elemente können einfach mit der CSS-Eigenschaft zentriert "text-align: center;". ":; Margin-right auto: auto; margin-left" Blockelemente sollten unter Verwendung von in der Mitte ausgerichtet werden, und von ihnen eine feste Breite zu geben. In Ihrem Fall würde ich vorschlagen, eine Spanne anstelle einem „div“ zu verwenden, oder den div vollständig und die text-align Methode loszuwerden.

Aktualisieren 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>      
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
        <title>Centering</title>
    <style type="text/css">
      table{
       border:1px solid black; 
      }
      span{
        background-color:red; 
        color:white;       
      } 
      td{
        text-align:center;
        width:200px; 
      }
    </style>
  </head>
  <body>
    <div class="item" id="item1">
      <table>
        <tr>
          <td>
            <span>Hi there!</span>  
          </td>
        </tr>        
      </table>
    </div>    
    </body>
</html>

Andere Tipps

#slideshow {
margin: 0 auto;
}

and also text-align: center

für die Tabelle

Die folgende Lösung funktioniert auch, wenn Sie die Größe des Bildes nicht wissen:

  


   
   

Ich möchte einen Kommentar oben hinzufügen, aber nicht über 50 rep .. doh. Ich glaube mich zu erinnern, dass, wenn Sie etwas vor dem Doctype in IE6 haben, sie es in Quirks-Modus sendet. Das kann Probleme verursachen, werden 

<?xml version='1.0' encoding='UTF-8'?>

Auch ein Schuss Entfernen dieser Wert sein.

Wenn Sie die absolute Positionierung entfernen können, verwenden Sie text-align:. Zentrum auf der td

Wenn Sie die absolute Positionierung nicht entfernen können und alle Ihre Bilder haben die gleiche Größe, Satz links / 2 bis td - img_width / 2. Wenn Sie also ein 80px breites Bild in einem 200px breit td haben, würden Sie verwenden 

#slideshow img {position:absolute; left:60px; opacity:0; z-index:8;}

Wenn Sie die absolute Positionierung nicht entfernen können, und Sie Bilder haben unterschiedliche Größen, werden Sie den linken Wert in Ihrem Javascript berechnen müssen.

IE nicht Opazität unterstützen. Es verwendet filter: alpha(opacity = 50); statt.

Standard 

 div#slideshow {
    margin : 0 auto;
    width : 200px;
}

und für (alten?), Dh 

td {
    text-align : center;
}

also nicht „wie“ Autopannen aber Zentren nicht nur Inline-Elemente, sondern Blockelemente (divs)

auch shure nicht, was für td auf, dh Standardwert von Anzeigeeigenschaft ist, weil es nicht table-cell und text-align nicht verwendet werden innerhalb Inline-Elemente nicht funktionieren, so eine weitere mögliche aproach es zu wickeln um ein anderes div wäre: 

<td>
<div id="slideshow_container">
<div id="slideshow">
...
</div>
</div>
</td>

und CSS 

div#slideshow {
    margin : 0 auto;
    width : 200px;
}
div#slideshow_container {
    text-align : center;
    width : 100%;
    height : 100%;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top