Ich habe einen Titel, der eine oder mehrere Zeilen haben kann.

Wie kann ich den Text vertikal ausrichten? Wenn es immer eine Zeile wäre, könnte ich einfach die Zeilenhöhe auf die Containerhöhe einstellen.

Ich kann es mit JavaScript machen, aber es gefällt mir nicht wirklich, ich suche nach einem reinen CSS-Weg.

Auch wenn sich der Container mit den Linien ausdehnen könnte, wäre er perfekt, sodass ich oben und unten immer die gleiche Polsterung haben kann.

Hierfür können Sie die display:table-cellEigenschaft verwenden:

.inline {
  display: inline-block;
  margin: 1em;
}
.wrap {
  display: table;
  height:  100px;
  width:   160px;
  padding: 10px;
  border:  thin solid darkgray;
}
.wrap p {
  display:        table-cell;
  vertical-align: middle;
}

<div class="inline">
  <div class="wrap">
    <p>Example of single line.</p>
  </div>
</div>

<div class="inline">
  <div class="wrap">
    <p>To look best, text should really be centered inside.</p>
  </div>
</div>

Aber es funktioniert IE8 und höher. Lesen Sie diesen Artikel für weitere Informationen: CSS-Tricks: Mehrzeiligen Text vertikal zentrieren .

Wenn Ihnen der display:tableTrick nicht gefällt (ich weiß, dass ich ihn nicht mag), finden Sie hier eine Lösung ohne:

.cen {
  min-height:5em; width:12em; background:red; margin:1em 0;
}
.cen p {
  display:inline-block; vertical-align:middle;
  margin:0 0 0 1em; width:10em;
}
.cen::after {
   display:inline-block; vertical-align:middle; line-height:5em;
   width:0; content:"\00A0"; overflow:hidden;
}

mit HTML

<div class="cen">
 <p>Text in div 1</p>
</div>

Dies gibt dem Div eine Höhe von 5em, es sei denn, der Inhalt ist höher, dann wächst er.
Live Beispiel hier .

Edit: Oh, auf welchen Browsern soll das funktionieren? IE8 wird nicht kooperieren.

(Später bearbeiten: CSS aktualisiert, um Probleme in Chrome zu beheben)

Diese Lösung gefällt mir sehr gut:

<div>
    <span style="display: inline-block; vertical-align: middle; height: --The height of your box here--"></span>
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>

Fühlen Sie sich frei, Stylesheets zu verwenden, und 100% für die Höhe ...

Möglicherweise müssen auch Leerzeichen zwischen den Span-Tags auskommentiert werden, da es sich um Inline-Blöcke handelt

Der Kredit geht an Hades . Ich habe es von hier bekommen

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here.</span>
</div>

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here.</span>
</div>

Hinweis: Dies scheint nicht mit mehrzeiligen Inhalten zu funktionieren.

Anstatt vertical-align: centerund zu verwenden display: table-cell, sollten Sie sich die neuere Methode namens CSS Display Flex ansehen, die VIEL einfacher ist

.box {
    width: 200px;
    height: 50px; 
    padding: 10px;
    margin-bottom: 20px;
    background-color: red;
    
    /* Only add these 2 lines */
    display: flex;
    align-items: center;
  }

<div class="box">Lorem ipsum dolor</div>
<div class="box">Lorem ipsum dolor sit amet ipsum dolor</div>

so etwas

HTML

<div>
    <p>
       Lorem Ipsum is simply
    </p>
</div>

CSS

div {
   display: table;
}
p {
   display:table-cell;
   vertical-align: middle;
}

Wenn Sie möchten, dass Ihr Text inline-blockreagiert, kann das Umbrechen von Wörtern von einer in mehrere Zeilen, wenn sich die Breite dynamisch ändert, der oben erwähnte Trick mit dem Helfer (der hier die beste Kompatibilität aufweist) nicht ausreichen, ebenso wie .inlinehelperdas Umbrechen von Text unter sich.
Hier ist die Komplettlösung für eine solche einfache Aufgabe:

HTML:

<div id="responsive_wrap">
    <span class="inlinehelper"><span id="content">        
</div>

CSS:

#responsive_wrap {   
   display: block;    
   height: 100%; //dimensions just for   
   width: 100%;  //example's sake
   white-space: nowrap;
}

#content {   
   display: inline-block;        
   white-space: initial;
}

.inlinehelper {
   height: 100%;    
   width: 0;
   vertical-align: middle;
   display: inline-block;
}

Beachten Sie die white-space:nowrapEigenschaft, die verhindert .inlinehelperund #contentin Beziehung zueinander gewickelt wird. white-space:initialbeim #contentZurücksetzen der Fähigkeit, sich selbst einzuwickeln span;

Eine weitere Option: Eher eine Frage der persönlichen Präferenz. Sie können stattdessen ein Pseudoelement verwenden .inlinehelper. Entfernen Sie die .inlinehelperCSS-Regeln und das Element und fügen Sie diesen Pseudoelement-CSS-Selektor hinzu:

#responsive_wrap:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0px;
}

PS: Ich habe herausgefunden, dass dies eine wirklich alte Frage zu spät ist. Lassen Sie diese Antwort daher sein, vielleicht ist sie für jemanden hilfreich.

In Bezug auf das Styling ist eine Tabelle der beste Weg, um Ihren Inhalt zu gestalten (fügen Sie die Style-Tags in CSS ein):

<table style="border:1;collapse;width:300px;padding:5px;background-color:red;">
<tr>
    <td style="width:250px;vertical-align:middle;">Lorem ipsum dolor sit amet ipswum dolor</td>
    <td style="width:50px;vertical-align:top;color:white;">1 Line</td>
</tr>

Für die Zeilenanzahl ist ein JS-Skript erforderlich. Schauen Sie hier:

http://www.webdeveloper.com/forum/archive/index.php/t-44333.html

Ich mag diese Art von Lösung. Ich habe irgendwo diesen Trick im Stackoverflow gesehen, weiß aber nicht genau, wo. Sehr nützlich! :) :)

ul {
background: #000; 
  padding-left: 0;
}
ul li {
  height: 130px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 3px solid #F7F7F7;
}
ul li:last-of-type {
  border-bottom: none;
}
ul li:after {
  color: #333;
  position: absolute;
  right: 35px;
  font-size: 40px;
  content: ">";
  top: 50%;
  margin-top: -24px;
  color: #FFDA00;
  -webkit-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
ul li a {
  font-size: 35px;
  font-family: Arial;
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 40px;
  height: 100%;
  line-height: 38px;
  display: inline-block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
ul li a:before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
}
ul li a span {
  display: inline-block;
  vertical-align: middle;
}

<ul>
	<li class="dn">
		<a href="kapec.ru.php"><span> Lorem ipsum 1 LINE</span></a>
		</li>
		<li>
			<a href="varianti.ru.php"><span>Lorem ipsum <br> 2 lines </span></a>
		</li>

	</ul>