Mitte und vertikal ausrichten Eingabefelder in Bootstrap

Ich habe eine Reihe von Eingabefeldern:Mitte und vertikal ausrichten Eingabefelder in Bootstrap

<p> 
     <input type="image" src="images/text_to_speech.svg" alt="Speak This" width="48" height="48" id="say_button"></input> 

     <input type="text" value="" class="input-lg" id="say_utterance" placeholder="Enter text to speak..."></input> 

     <span id="say_remaining"></span> 
    </p>

Es ist nicht vertikal ausgerichtet ist. Wie behebe ich das?

Quelle

2016-08-08 ssk

Bitte geben Sie eine wrap [Minimal, vollständig und prüfbare Beispiel] (http://stackoverflow.com/help/mcve) Ihrer versuchen wir, Ihr Problem zu lösen und zu erklären, warum Ihr eigener Versuch fehlgeschlagen ist - auf diese Weise können Sie etwas Nützliches für Ihre zukünftige Entwicklung lernen, sowie eine Antwort auf dieses einzelne Problem bekommen. – andreas

Für den minimalen Code, den Sie zur Verfügung gestellt, es ist eigentlich Ihr Bild das Problem verursacht. Fügen Sie vertical-align:middle; hinzu, und der Rest wird zentriert. Demo.

Quelle

2016-08-08 20:50:59

Das ist nicht der Bootstrap-Weg, um dies zu tun, dies ist ein einfaches Überschreiben mit benutzerdefinierten CSS. –

@ user2521387 Während das stimmt, * Für den minimalen Code * .... Ich arbeite mit dem, was er gab. Nicht davon ausgehen, dass das Hinzufügen einer Reihe von Extras eine Option ist. –

OK, ich stimme dir zu. –

Versuchen Sie, diese anstelle von p in einem div zu setzen.

<div class="vcenter"> 
<input type="image" src="images/text_to_speech.svg" alt="Speak This" width="48" height="48" id="say_button"></input> 

     <input type="text" value="" class="input-lg" id="say_utterance" placeholder="Enter text to speak..."></input> 

     <span id="say_remaining"></span> 
</div>

der Stil

.vcenter { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
}

Quelle

2016-08-08 20:50:35

Warum verwenden Sie Bootstrap, wenn Sie es nicht verwenden? Hier

ist ein einfaches Beispiel dafür, wie Bootstrap gibt Ihnen einige Werkzeuge/Eingangsklassen für Form, es zu tun:

<div class="row"> 
    <div class="col-lg-6"> 
     <div class="input-group"> 
      <span class="input-group-addon"> 
       <input type="checkbox" aria-label="..."> 
      </span> 
      <input type="text" class="form-control" aria-label="..."> 
     </div><!-- /input-group --> 
    </div><!-- /.col-lg-6 --> 
    <div class="col-lg-6"> 
     <div class="input-group"> 
      <span class="input-group-addon"> 
       <input type="radio" aria-label="..."> 
      </span> 
      <input type="text" class="form-control" aria-label="..."> 
     </div><!-- /input-group --> 
    </div><!-- /.col-lg-6 --> 
</div><!-- /.row -->

Sie benötigen ein Eingabefeld in einer Reihe wickeln, erstellen Sie dann zwei Spalten über col-lg-6 für 2 Behälter, der insgesamt 12 Spalten sein wird und beide Eingabefelder zeilengleich/vertikal beabstandet sind.

Vergessen Sie nicht, Ihre Eingabefelder mit einem div mit der Klasse input-group

Quelle

2016-08-08 20:54:38

Mitte und vertikal ausrichten Eingabefelder in Bootstrap

Antwort

Verwandte Themen