Ich muss ein div zentrieren. Dieses div ist die Breite seiner 2 Zeilen. Die Breite dieser 'Zeilen' ist durch ihren Inhalt definiert. Der Inhalt hat sowohl links- als auch rechtsbündige Elemente. Ich brauche auch den Inhalt, der weniger hoch ist, um vertikal zentriert zu sein.Erzielen Sie den vertikalen Abstand zwischen Element mit Anzeigetabellenzeile?
Bisher habe ich das alles gemacht. Ich brauche auch eine Hintergrundfarbe in den Reihen und ein Leerzeichen zwischen ihnen. Ich habe den Raum mit div.spacer gemacht, aber ich frage mich, ob es möglich ist, dasselbe ohne ein leeres Div zu erreichen, um mein Markup sauberer zu halten?
Im kämpfen als Anzeige Tabelle-Zeile und Tabelle-Zelle nicht für Marge.
Ich habe auch versucht, Pseudo-Inhalt zu verwenden, um absolut einen weißen Block über der Spitze zu positionieren, so dass es so aussieht, als wäre ein Leerzeichen zwischen den Zeilen, aber relative Anzeige nicht gut auf ein Element mit Anzeige Tabelle-Zeile Cross-Browser.
Ich habe versucht, mit der Grenze-Abstand CSS-Eigenschaft, aber es fügt Marge über und unter Zeilen, und ich brauche nur den Rand unten.
Unten ist mein Markup. Das Bild zeigt genau, was ich erreichen muss. Kann ich dasselbe ohne div.spacer machen?
http://codepen.io/anon/pen/ZWMPgB
<div class="cont">
<div class="row">
<h2>Heading</h2>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="spacer"></div>
<div class="row">
<h2>Longer Heading</h2>
<ul>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</div>
</div>
body {
padding-top: 10px;
}
* {
margin: 0;
padding: 0;
}
.cont {
display: table;
margin: auto;
}
.row {
display: table-row;
background: grey;
}
h2 {
display: table-cell;
padding-right: 50px;
font-size: 3em;
}
ul {
display: table-cell;
vertical-align: middle;
}
li {
display: inline-block;
}
.spacer {
display: table-row;
height: 10px;
}