CSS Vertikale Ausrichtung von text in absolut positionierten Absatz

Bevor wir starten:

Bitte schließen Sie nicht dieses als ein Duplikat der anderen Frage. Ich habe gerade gesucht, hier auf Stackoverflow, ohne es zu finden, die dem genauen Fall.

Die nächste ist glaube ich diese Frage. Noch, die gegebenen Antworten gibt es nicht wirklich Arbeit für mich, ich glaube, weil der Absatz im position: absolute;.

Das ist der HTML:

<ul>
    <li><img src="http://www.placehold.it/300x200" /><p><span>Lorem Ipsum</span></p></li>
</ul>

Und CSS:

li {
  position: relative;
  float: left;
  overflow: hidden;
}

img {
  width: 100%;
  vertical-align: middle;
}

p {
  background-color: rgba(255, 0, 0, .3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

span {
    background-color: rgba(0, 255, 0, .3);
    vertical-align: middle;
}

Fiddle: http://jsfiddle.net/DpVjZ/

vertical-align: middle; nur Unebenheiten der text ein klein wenig Weg von der Oberseite, aber nicht wirklich in der Mitte.

Einstellung der Spanne position: absolute; und dann die Anwendung top: 50%; und dann margin-top: -x%; wird nicht funktionieren, da die Höhe der Spanne ist nicht bekannt, wie es ist, dynamische Inhalte.

Obwohl die verlinkten Frage erklärt, dass dies eine schlechte Praxis, ich habe auch versucht, die display: table-cell Ansatz ohne Ergebnis. Bitte helfen Sie mir.

Warum haben Sie eine block-level-element in einem list-item? Denken Sie nicht, dass ist, warum Sie Probleme haben?
Soweit ich weiß, die Liste nur Elemente, die nicht enthalten darf block-level-Elemente sind dt.
Man könnte natürlich einfach die Liste Element, um display:block;. Ich denke, man nähert sich dem problem von der falschen Ende des Fernrohrs. Was wollen Sie erreichen? Optisch, was es soll Aussehen? Der text soll auf das Bild?
das ist eine haarige Frage
Ja, der text soll über dem Bild, vertikal zentriert und horizontal. Einstellung der Liste Element zu display: block; tut nichts für mich, könnten Sie bitte erläutern Sie es ein bisschen mehr sein?
Bild und text sind unbekannte Größen, nehme ich an?

InformationsquelleAutor Sven | 2013-01-21

2

Loszuwerden, der p-tag. Sie haben bereits in einer li eh.

css
```
li {
position: relative;
float: left;
overflow: hidden;
}

img {
width: 100%;
height: 100%;
}

span {
background-color: rgba(0, 255, 0, .3);
position: absolute;
text-align:center;
width: 100%;
top:46%;
}
```
html
```
<ul>
<li><span>Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li>
</ul>
```
Getestet auf Fenster, IE9 und Chrome.

Weiß nicht, ob es für die demo oder nicht, aber wenn Sie wollen, dass die roten Schatten über das Bild eine Klasse für ein span-tag, dann legen Sie eine neue span mit der Klasse.
```
span.text {
background-color: rgba(0, 255, 0, .3);
position: absolute;
text-align:center;
width: 100%;
top:46%;
}

span.redshade {
background-color: rgba(255, 0, 0, .3);
width: 100%;
height: 100%;

<ul>
<li><span class="redshade">&nbsp;</span><span class="text">Lorem Ipsum</span><img src="http://www.placehold.it/300x200" /></li>
</ul>
```
- Danke! Ich mag die Art, wie Sie Ihre Lösung liefert ein tolles Ergebnis und ist leicht zu verstehen, auch.
- Oben: 46% schwer-Codierung eine Vermutung über die Höhe der Spanne; es ist nicht zentriert für eine beliebige Zeitspanne.
- Ja, es ist eine one-line-of-text-Lösung. Multi-line-Lösungen sind viel komplizierter. Es konzentriert sich für eine beliebige Bildgröße. Es wird auch funktionieren, wurden die Spannweite und Bild bekannt sind.
- Vielen Dank für die Auswahl.
InformationsquelleAutor fredsbend
10

Ohne harte Codierung einer angenommenen Höhe für den text oder das Bild, das ich (leider) nicht lösen können, das in weniger als 3 Schichten:
1. Etablieren absolute Positionierung
2. Einrichten-Tabelle-layout
3. Etablieren table-cell layout und vertical-align: middle
Kombination von 1 und 2 scheint zu verhindern, dass height: 100% von der Arbeit aus mir unbekannten Gründen. Ich denke, die Ablehnung von table-cell layout scheint eine Veruntreuung des alten "benutze keine Tabellen für layouts" meme; CSS ist für das layout, so ist dies nicht falsch, das element Semantik. (Obwohl leider es erfordert semantisch bedeutungslosen divs.)
```
<ul>
<li>
    <img src="http://www.placehold.it/300x200" />
    <div class="absolute">
        <div class="table">
            <div class="middle">
                <p><span>Lorem Ipsum</span>
                </p>
            </div>
        </div>
    </div>
</li>
</ul>


li {
    position: relative;
    float: left;
    overflow: hidden;
}
img {
    width: 100%;
}
.absolute, .table, .middle {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.absolute {
    position: absolute;
}
.table {
    display: table;
}
.middle {
    display: table-cell;
    vertical-align: middle;
}
p {
    background-color: rgba(255, 0, 0, .3);
}
span {
    background-color: rgba(0, 255, 0, .3);
}
```
http://jsfiddle.net/svachalek/vTGxx/4/
- +1 Das ist ein bisschen kompliziert, aber tut Konto für unbekannte Höhen und breiten. Ich bearbeitet Ihren Beitrag, um text-align:center p-tag und aktualisiert die Geige und den code aufgeräumt.
InformationsquelleAutor svachalek

Vertikales ausrichten ist eine heikle Sache in CSS, aber nicht schwer zu bewerkstelligen, wenn u sind vertraut mit css-Tabellen.

<style>
      html, body, #wrapper { height: 100%; }
      #wrapper { display: table; width: 100%; } /* Create space */
      #wrapper > * { display: table-cell; vertical-align: middle; } /* table-cells can be verticaly aligned! */
      #wrapper > * > .container { display: block; margin: auto; width: 600px; border: 1px solid #000000; } /* Horizontal align */
</style>

<div id="wrapper">
  <section id="main">
    <div class="container">
      <p>
        I'm centered in a fluid layout! :D
      </p>
    </div>
  </section>
</div>

BEARBEITEN
Oben platzieren Sie dieses element auf der Oberseite eine andere machen nur die #wrapper position: fixed; height: 100%; width: 100%; left: 0px; top: 0px; oder innerhalb eines Elements mit position: absolute;

InformationsquelleAutor Chris Visser

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.