Css Vertikale Ausrichtung

Ich habe Schaltflächen mit single-Spalte, um innen div. Button-Anzahl ist veränderbar. Ich möchte zum ausrichten von Schaltflächen vertikal aus. "vertical-align:middle" wird nicht funktionieren. Wie kann ich das tun?

Div-Höhe ist fixiert. http://jsfiddle.net/WmD3L/
Wie kann ich richten Sie diese Schaltflächen vertikal aus?

  • Geist zeigt uns Ihren HTML-und CSS, bitte? Helfen könnte. 🙂
InformationsquelleAutor user811686 | 2011-07-12
  1. 3

    Wenn der button hat eine Feste Höhe, die Sie verwenden können line-height zu setzen Sie den text in der Mitte.

    z.B.

    #button {
   height: 50px;
   line-height: 50px; //Must be the same as height to vertically align to the middle
}

    Können Sie auch

    #button {
    display: table-cell;
    vertical-align: middle;
}

    Aber ich glaube nicht, dass das funktioniert cross-browser-leider.

    InformationsquelleAutor James Bell
  2. 0

    Dies ist der beste Weg meiner Meinung nach (Es ist IE8+):

    HTML:

    <div class="block">
  <div class="centered">
    <div><input type="submit" value="ABC"/></div>
    <div><input type="submit" value="ABC"/></div>
    <div><input type="submit" value="ABC"/></div>
  </div>
</div>

    CSS:

    /* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content:'';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

    Demo: http://jsfiddle.net/WmD3L/13/

    InformationsquelleAutor Justin
Schreibe einen Kommentar