wake-up-neo.com

Text in Blockelement vertikal ausrichten

Ich weiß, dass immer nach vertikaler Ausrichtung gefragt wird, aber ich scheine keine Lösung für dieses spezielle Beispiel zu finden. Ich möchte, dass der Text innerhalb des Elements zentriert wird, nicht das Element selbst zentriert:

HTML:

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

CSS:

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}


li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}
<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

Gibt es dafür wirklich keine CSS3-Eigenschaft? Ich wäre bereit, einen <span> hinzuzufügen, aber ich möchte wirklich keine weiteren Markierungen hinzufügen.

Vielen Dank!

htmlcsshtml5css3
37
user623520

Entsprechend dem CSS Flexible Box Layout Module können Sie das a -Element als flex-Container (siehe Abbildung) deklarieren und align-items verwenden, um vertikal Text entlang der cross-Achse auszurichten (was senkrecht zur Hauptachse ist).

enter image description here

Das ist alles was Sie tun müssen 

display: flex;
align-items: center;

Überlegungen zur Browserunterstützung

Chrome

display: -webkit-flex;
-webkit-align-items: center;

Firefox

Setzen Sie layout.css.flexbox.enabled auf true.

Alternativ können Sie noch verwenden 

display: -moz-box;
-moz-box-align: center;

Wisse einfach, dass dies nicht css3-flexbox ist und dass es nicht einwickelt.

DH

Kann jemand die IE -Syntax überprüfen und hier hinzufügen? Sie können die Syntax über Erweiterte Browserübergreifende Flexbox ausprobieren.

Siehe diese Geige (Denken Sie daran, layout.css.flexbox.enabled auf true zu setzen, wenn Sie mit FF arbeiten.)

71
melhosseiny

Sie können es auch versuchen

a {
  height:100px;
  line-height:100px;
}
46
ericbae
li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;

}

12
Vlad

Sie können die Anzeige: Inline-Block und: After.Like versuchen.

HTML

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

CSS

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: inline-block;
    vertical-align: middle;
    background: red;  
}
li a:after {
  content:"";
  display: inline-block;
  width: 1px solid transparent;
  height: 100%;
  vertical-align: middle;
}

Bitte sehen Sie sich die Demo an.

4
Airen

Wäre die Verwendung von Padding für Ihre Anforderungen in Ordnung ?: http://jsfiddle.net/sm8jy/ :

li {
    background: red;
    text-align:center;
}
li a {
    padding: 4em 0;
    display: block;
}
2
AJJ

Hier ist die allgemeine Lösung, die nur CSS verwendet, mit zwei Varianten. Der erste zentriert vertikal in der aktuellen Zeile, der zweite zentriert sich innerhalb eines Blockelements.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
    <ul>
        <li>
            line one
        </li>
        <li>
            <span style="display: inline-block; vertical-align: middle">line two dot one
                <br />
                line two dot two</span>
        </li>
        <li>
            line three
        </li>
    </ul>
    <div style="height: 200px; line-height: 200px; border-style: solid;">
            <span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
                <br />
                line two dot two</span>
    </div>
</body>
</html>

Soweit ich es verstehe, gilt Vertikal-Ausrichten nur für Inline-Block-Elemente, z. B. <img>. Sie müssen das Anzeigeattribut eines Elements in Inline-Block ändern, damit es funktioniert. Im Beispiel wird die Zeilenhöhe erweitert, um sie an die Spannweite anzupassen. Wenn Sie ein enthaltendes Element wie <div> verwenden möchten, setzen Sie das Zeilenhöhenattribut auf die Höhe. Achtung, Sie müssen die Zeilenhöhe angeben: normal für den enthaltenen <span>, oder erbt vom enthaltenden Element.

1
Steve11235

Sie können auch inline-table neben table-cell verwenden, wenn Sie Ihre Objekte vertikal und horizontal zentrieren möchten. Nachfolgend ein Beispiel für die Verwendung dieser Anzeigeeigenschaften zum Erstellen eines Menüs:

.menu {
  background-color: lightgrey;
  height: 30px; /* calc(16px + 12px * 2) */
}

.menu-container {
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
  height: 100%;
}

.menu-item {
  list-style-type: none;
  display: inline-table;
  height: 100%;
}

.menu-item a {
  display: table-cell;
  vertical-align: middle;
  padding-left: 2px;
  padding-right: 2px;
  text-decoration: none;
  color: initial;
}

.text-upper {
  text-transform: uppercase;
}

.text-bold {
  font-weight: bold;
}
<header>
  <nav class="menu">
    <ul class="menu-container">
      <li class="menu-item text-upper text-bold"><a href="javascript:;">StackOverflow</a></li>
      <li class="menu-item"><a href="javascript:;">Getting started</a></li>
      <li class="menu-item"><a href="javascript:;">Tags</a></li>
    </ul>
  </nav>
</header>

Es funktioniert, indem Sie display: inline-table; auf alle <li> setzen und dann display: table-cell; und vertical-align: middle; auf die Kinder <a> anwenden. Dies gibt uns die Möglichkeit, <table>-Tag zu verwenden, ohne es zu verwenden.

Diese Lösung ist nützlich, wenn Sie die Höhe Ihres Elements nicht kennen.

Die Kompatibilität ist sehr gut (relativ zu caniuse.com ), mit Internet Explorer> = 8.

0
Anwar

mit Dank an Vlads Antwort für Inspiration; getestet und arbeitet an IE11, FF49, Opera40, Chrome53

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  text-align: center; /* H align */
  vertical-align: middle;
}

zentriert sich in alle Richtungen, auch mit Textumbruch, Zeilenumbrüchen, Bildern usw.

Ich wurde schick und machte einen Ausschnitt 

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  /*H align*/
  text-align: center;
  /*V align*/
  vertical-align: middle;
}
a.thin {
  width: 40px;
}
a.break {
  /*force text wrap, otherwise `width` is treated as `min-width` when encountering a long Word*/
  Word-break: break-all;
}
/*more css so you can see this easier*/

li {
  display: inline-block;
}
li > a {
  padding: 10px;
  margin: 30px;
  background: aliceblue;
}
li > a:hover {
  padding: 10px;
  margin: 30px;
  background: aqua;
}
<li><a href="">My menu item</a>
</li>
<li><a href="">My menu <br> break item</a>
</li>
<li><a href="">My menu item that is really long and unweildly</a>
</li>
<li><a href="" class="thin">Good<br>Menu<br>Item</a>
</li>
<li><a href="" class="thin">Fantastically Menu Item</a>
</li>
<li><a href="" class="thin break">Fantastically Menu Item</a>
</li>
<br>
note: if using "break-all" need to also use "&lt;br>" or suffer the consequences

0
RozzA