Inline horizontalen Abstandshalter in HTML
Ich mache eine Web-Seite mit einer Diashow, mit der gleichen Technik verwendet, die auf http://zine.pocoo.org/. Die person, die ich bin, dass die Seite für möchte die slideshow zentriert werden. Jedoch, einige der Fotos sind im hochformat und einige sind Landschaft. (Dies war nicht meine Wahl.) Ich brauche eine position: absolute um die li ' s mit den Elementen in der richtigen Stelle, so zentrieren Sie funktioniert nicht. (Zumindest nicht mit normalen Methoden.)
So, ich dachte, dass es funktionieren könnte zum einfügen eines 124-pixel - "spacer" -, bevor das Bild auf die portrait-Bilder. Ich versuchte es mit einem <span style="width: 124px;"> </span>, aber es fügt nur einen einzigen Raum, der nicht die volle 124 Pixel. Die Diashow ein-und ausgeblendet OK, obwohl, so denke ich, dass es funktionieren würde, wenn ich könnte Holen Sie sich die richtigen Abstände.
Meine Frage ist: kennt jemand eine Möglichkeit zu haben, 124px Platz inline in HTML (möglichst ohne Verwendung von Bildern), oder ein anderer Weg, um die Mitte der Bilder in der li Elemente?
- Tatsächlich, ich landete hinzufügen eines
style="padding-left: 124px;"Attribut der<img />- tags. Noch, wenn jemand anderes diese Frage beantworten können, wäre es ziemlich nützlich sein in der Zukunft. - Es gibt keine Abstandshalter-element in HTML. Dies ist, weil HTML ist gedacht, um semantisch markieren Sie Ihre content, und der Abstand ist PRÄSENTATIONSELEMENTE. Der richtige Weg, es zu tun ist mit CSS, entweder mit Polsterung auf der mit <li>, oder-Margen auf den <img> als TrueSoft schlägt in seiner Antwort.
- Padding oder margin funktioniert großartig, wenn Sie einen Zugang zu html-Attribut innerhalb von html-tag, hier zum Beispiel <img>, aber wenn Sie nicht ändern können-Attribut oder css, dann so etwas wie <span style="width:21px;float:right"> </span> immer noch eine Lösung. Beachten Sie, dürfen Sie mit float:left oder rechts, je nachdem, wo Sie wollen, dass Ihr spacer.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich glaube, Sie brauchen, um hinzuzufügen
margin-leftstattpadding-left, denn die Marge ist außerhalb eines Elements, und die Polsterung innen ist.Dies ist so alt, aber ich denke, es ist immer noch lohnt zu beantworten. Der Grund Ihrer Spanne nicht erweitert ist, weil es immer noch ein inline-element. set display:inline-block zu bekommen, Verhalten Sie sich mehr wie ein block-element
Versuchen zu vermeiden, dass große Abstandshalter auf Elemente und vor allem auf mehrere Elemente. Der einzige Weg, um fügen Sie einen spacer auf Ihr element wäre, die relative Positionierung oder ein inline-block-element (mit Vorsicht benutzen.)
Ihre beste Wette für die Diashow ist eine relative positioniert
<ul>. Da die<ul>ist relativ positioniert, können Sie die<li>sposition:absolute;innerhalb der<ul>. An dieser Stelle können Sie die<li>s zuwidth:100%;undtext-align:center;so, dass alles, was im inneren positioniert ist in der horizontalen Mitte (vertikale Zentrierung in CSS2 ist schwierig.) Check-out http://jquery.malsup.com/cycle/ die Ausgänge inline-styling standardmäßig ist aber immer noch wirklich nett.