it-swarm.com.de

CSS, um den Text vertikal an der Mitte von div auszurichten

Was ist der richtige Weg, um Text in einem div dazu zu bringen, sich vertikal zur Mitte auszurichten? Ich habe ein paar "Tricks" gefunden, aber ich brauche etwas, das mit einer einzelnen Zeile und mehreren Zeilen funktioniert. Hoffentlich fehlt mir etwas dummes einfaches:

http://jsfiddle.net/rogerguess/DawFy/

.header {
    display: inline-block;    
    text-align: center;
    width: 123px;
    background: green;
    border-radius: 4px 4px 4px 4px;
    height: 80px;
    vertical-align: middle;
}

<div >
    <div class="header">test1 </div>
    <div class="header">some text that will wrap</div>
    <div class="header">test3</div>
</div>
11
Roger

display: inline-block; in display: table-cell; ändern

18

Wenn Ihre mehrzeiligen Elemente aus ansprechenden Gründen umbrochen werden müssen, ist Flexbox die beste Wahl. Aufgrund der Flakivität der Firefox-2009-Flexbox-Implementierung muss sie etwas anders gehandhabt werden als bei modernen Flexbox-Implementierungen.

http://codepen.io/cimmanon/pen/mxuFa

<ul>
  <li>One lorem ipsum dolor sit amet</li><!--
  --><li>Two</li><!--
  --><li>Three</li><!--
  --><li>Four</li><!--
  --><li>Five</li>
</ul>

li {
  text-align: center;
  vertical-align: middle;
  /* fallback for non-Flexbox browsers */
  display: inline-block;
  /* Flexbox browsers */
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  /* vertical centering for legacy, horizontal centering for modern */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  /* modern Flexbox only */
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /* legacy Flexbox only */
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
}
8
cimmanon

Ich habe für Sie ein kurzes Beispiel mit der Eigenschaft display: table-cell für das übergeordnete div erstellt.

CSS:
    .outer {
    width: 500px;
    height: 500px;
    display: table-cell;
    background-color: red;
    vertical-align: middle;
}

.inner {
    display: block;
    width: 300px;
    height: 200px;
    margin: 0px auto;
    background-color: yellow;
}

HTML: <div class="outer"> <div class="inner"> </div> </div>

http://jsfiddle.net/aKT42/

2
Sorin Haidau

Versuchen Sie dies, es wird funktionieren.

    <div class="greenBorder" id="outer">
         <div id="middle">
             <div class="greenBorder" id="inner">
             Your Text Here
             </div>
         </div>
    </div>

Css-Klasse

    #outer {
        height: 100%;
        overflow: hidden;
        position: relative;
        width: 100%;
        display: table;
        position: static;
    }

    div.greenBorder {
        background-color: #39B9FF;
        text-align: center;
        color: white;
    }

    #middle[id] {
        display: table-cell;
        position: static;
        vertical-align: middle;
        width: 100%;
    }

    #middle {
        position: absolute;
        top: 50%;
    }
1
DOTNET Team

Die meisten dieser Lösungen würden für mich nicht funktionieren, da entweder die Höhe manuell festgelegt wurde (was ich nicht tun konnte) oder Dinge wie Inline-Block und Float die Fähigkeit eines inneren Divs entfernen würden, die Höhe des übergeordneten Divs zu erben. Am Ende habe ich eine Tabelle mit zwei Spalten erstellt, die jeweils meine divs enthielt, und dann hatte ich keine Probleme mit dem vertikalen Zentriertext.

0
Helzgate

http://jsfiddle.net/DawFy/16/

.header {

display: block;    
text-align: center;
    width: 123px;
background: green;
border-radius: 4px 4px 4px 4px;
height: 80px;
margin:0px auto;


}
li
 {
list-style-type:none;

 }

<div >
<li>
<div class="header">test1 </div>
<li>
    <div class="header">some text that will wrap</div>
<li>
    <div class="header">test3</div>

  •  

    Versuchen Sie dies nicht wissen, ob es "richtig" ist, aber funktioniert 

  • 0
    EntryLevel