Frage css ein- oder mehrzeilige vertikale Ausrichtung


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 die Zeilenhöhe einfach auf die Containerhöhe setzen.

Ich kann es mit JavaScript machen, aber ich mag es nicht wirklich, ich suche nach einer reinen CSS-Methode.

Auch wenn der Container mit den Linien erweitert werden könnte, wäre es perfekt, so dass ich immer die gleiche Polsterung oben und unten haben kann.

enter image description here


75
2018-02-08 11:25


Ursprung


Antworten:


Dafür können Sie verwenden display:table-cell Eigentum:

.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: Vertikalen zentrierten mehrzeiligen Text.


109
2018-02-08 11:38



Wenn du das nicht magst display:table Trick (Ich weiß, ich weiß nicht) hier ist eine Lösung ohne sie:

.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 es.
Live-Beispiel Hier.

Edit: Oh, mit welchem ​​Browser soll das funktionieren? IE8 wird nicht kooperieren.

(Spätere Bearbeitung: aktualisiertes CSS, um Probleme in Chrome zu beheben)


9
2018-02-08 12:36



Ich mag diese Lösung wirklich:

<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 und 100% für die Höhe zu verwenden ...

Möglicherweise müssen Leerzeichen zwischen den span-Tags auch kommentiert werden, da dies Inline-Blöcke sind

Kredit geht an Hades. Ich habe es von Hier

<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 mehrzeiligem Inhalt zu funktionieren.


9
2018-03-17 20:50



so etwas

HTML

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

CSS

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

3
2018-02-08 11:38



Wenn Sie möchten, dass Ihr Text reagiert, wird das Umbrechen von Wörtern von einem auf mehrere Zeilen als Breite dynamisch geändert, wie oben erwähnt inline-block Helfer (die hier die beste Kompatibilität haben) können nicht ausreichen, wie .inlinehelper kann den Text unter sich selbst verschieben.
 Hier ist die komplette Lösung für solch eine 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 das white-space:nowrap Eigenschaft, die verhindert .inlinehelper und #content in Beziehung zueinander zu bringen. white-space:initial auf #content setzt die Umwicklungsfunktion zurück span selbst;

Andere Option: Mehr eine Frage der persönlichen Präferenz. Sie können stattdessen ein Pseudo-Element verwenden .inlinehelper. Entferne das .inlinehelper css Regeln und Element und fügen Sie dieses Pseudo-Element CSS-Selektor hinzu:

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

P.S .: Ich habe herausgefunden, dass dies eine wirklich alte Frage ist, zu spät, also lassen Sie diese Antwort, vielleicht wird es für jemanden hilfreich sein.


2
2018-05-30 13:57



Stylingtechnisch wäre eine Tabelle der beste Weg, um Ihren Inhalt zu gestalten (setzen Sie die Stil-Tags in CSS):

<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 wird ein JS-Skript benötigt. Schauen Sie hier:

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


1
2018-02-08 11:38



Ich mag diese Art von Lösung. Ich habe irgendwo diesen Trick im Stackoverflow gesehen, kann mich aber nicht mehr genau erinnern. 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>


0
2017-09-22 20:24