CSS选择字段和文本位置

时间：2018-03-24 13:48:40

标签： javascript html css vertical-alignment text-alignment

我正在使用Ionic v1开发一个多平台应用。

问题在于CSS，这是我想要以图形方式执行的页面：

Page screenshoot

特别是我希望将输入列表垂直居中于红色圆圈：我想将它们与左侧的标题对齐。 我还希望将文本垂直居中于第二个圆圈，与红色按钮对齐。

这是该页面的html和CSS代码：

＆＃13;
＆＃13; 
app.controller('Wallet_management_Ctrl',['$scope','$http','Lang', function($scope,$http,Lang) {       
    
    var binance =  localStorage.getItem("binance");
    binance = (binance) ? JSON.parse(binance) : [];
    $scope.binance = binance;
    
    var coinmarketcapsymbol =  localStorage.getItem("Coinmarketcap");
    coinmarketcapsymbol = (coinmarketcapsymbol) ? JSON.parse(coinmarketcapsymbol) : [];
    $scope.coinmarketcapsymbol = coinmarketcapsymbol;
    
    var symbolsBitfinex =  localStorage.getItem("symbolsBitfinex");
    symbolsBitfinex = (symbolsBitfinex) ? JSON.parse(symbolsBitfinex) : [];
    //console.log(symbolsBitfinex);
    $scope.symbolsBitfinex = symbolsBitfinex;
    
    var symbolsBittrex =  localStorage.getItem("Bittrex");
    symbolsBittrex = (symbolsBittrex) ? JSON.parse(symbolsBittrex) : [];
    //console.log(symbolsBitfinex);
    $scope.symbolsBittrex = symbolsBittrex;
    
    var symbolsPoloniex =  localStorage.getItem("Poloniex");
    symbolsPoloniex = (symbolsPoloniex) ? JSON.parse(symbolsPoloniex) : [];
    //console.log(symbolsBitfinex);
    $scope.symbolsPoloniex = symbolsPoloniex;
    
    var symbolsCryptopia =  localStorage.getItem("Cryptopia");
    symbolsCryptopia = (symbolsCryptopia) ? JSON.parse(symbolsCryptopia) : [];
    //console.log(symbolsBitfinex);
    $scope.symbolsCryptopia = symbolsCryptopia;
    
    var language = Lang.getlang();
    $scope.showlang = language;  
    
    if (language=="ita"){
        $scope.title= "Gestione Wallet"
    }
    if (language=="en"){
        $scope.title= "Wallet management"
    }
    var weblist = ["Binance","Bitfinex","Bitstamp","Bittrex", "Coinmarketcap","Cryptopia","Poloniex"];
    var BitstampList = ["bch", "btc", "eth", "ltc", "xrp"];
    $scope.weblist = weblist;
    $scope.symbolsBitstamp = BitstampList;
        
    var walletlist = localStorage.getItem("walletlist");
    walletlist = (walletlist) ? JSON.parse(walletlist) : [];
   // console.log(walletlist);
    var item = [];
    
    if (walletlist === null)
        var walletlist = [];
    $scope.walletlist = walletlist;
    
      
      
    $scope.add = function() {
        if($scope.site == null || $scope.currency == null || $scope.amount == null || $scope.price == null){
            if (language=="ita"){
                alert("Devi riempire tutti i campi");
            };
            if (language=="en"){
                alert("Fill in all the labels");
            };
        }
        else{
            if ($scope.amount == 0 || $scope.price == 0){
                if (language=="ita"){
                alert("La quantità o il prezzo non possono essere nulli");
            };
            if (language=="en"){
                alert("The amount or the price can't be null");
            };
            }
            else{
                item = [$scope.site,$scope.currency,$scope.amount, $scope.price];
                walletlist.push(item);
                window.localStorage.setItem("walletlist", JSON.stringify(walletlist));
                
                $scope.site = null;
                $scope.currency = null;
                $scope.amount == null;
                $scope.price == null;
            }
        }
     
    };
    
    $scope.delete = function(item) {
        var index = walletlist.indexOf(item);
        if (index > -1) {
            walletlist.splice(index, 1);
        }       
        window.localStorage.removeItem("walletlist");
        window.localStorage.setItem("walletlist", JSON.stringify(walletlist));
            //location.reload();

    };  
    
    $scope.showBitfinex = function() {
        if ($scope.site == "Bitfinex"){
            return true;
        }
        else
            return false;
    };
    
    $scope.showBinance = function() {
        if ($scope.site == "Binance"){
            return true;
        }
        else
            return false;
    };
    
    $scope.showCoinmarketcap = function() {
        if ($scope.site == "Coinmarketcap"){
            return true;
        }
        else
            return false;
    };
    
    $scope.showBittrex = function() {
        if ($scope.site == "Bittrex"){
            return true;
        }
        else
            return false;
    };
    $scope.showPoloniex = function() {
        if ($scope.site == "Poloniex"){
            return true;
        }
        else
            return false;
    };
    $scope.showCryptopia = function() {
        if ($scope.site == "Cryptopia"){
            return true;
        }
        else
            return false;
    };
    $scope.showBitstamp = function() {
        if ($scope.site == "Bitstamp"){
            return true;
        }
        else
            return false;
    };
    
    $scope.$on('$ionicView.leave', function() {
        location.reload();
    });
       
}]);
＆＃13; 
/* Empty. Add your own CSS if you like */


/* Utilities */

* {
  font-family: 'Comfortaa';
}

.pane {
  background-color: #E8EAF6;
}


/*menu laterale img in alto*/

.menu .bar.bar-header.expanded {
  background-image: url('../img/menu.jpg');
  background-size: 120%;
  background-position: 0%;
  transition: all .5s ease-in-out;
}


/*menu laterale img in alto*/

.menu.menu-left * {
  background-color: #303F9F;
  font-weight: bold;
  font-family: 'Comfortaa';
  font-size: 1.05em;
  color: white;
}

.nav-bar-block,
.bar {
  background-color: #303F9F !important;
  font-family: 'Comfortaa';
  font-weight: bold;
}

.link {
  color: #116262;
  font-weight: bold;
}

h4 {
  color: #283593;
  font-size: 1.875em;
  margin-bottom: 16px;
}

h4:first-child {
  border-top: none;
  padding-top: initial;
}

h3 {
  color: #283593;
  font-size: 1.4em;
  margin-bottom: 16px;
}

h3:first-child {
  border-top: none;
  padding-top: initial;
}

.title-bordered {
  border-top: solid 2px #bbb;
  padding-top: 30px;
}

p {
  color: #555;
  margin: 0 0 25px;
}

.no-border {
  border: none;
}

.static {
  position: static;
}

.bold {
  font-weight: bold;
}

.border-top {
  border-top: solid 1px #ccc;
  padding-top: 30px;
}

.blue-grey-900 {
  background-color: #263238 !important;
  color: #fff;
}


/* Menu */

.menu.menu-left * {
  font-weight: bold;
}

.item-radio input:checked~.item-content {
  background: transparent;
}

.menu-open .ion-navicon {
  transform: rotate(-360deg);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.menu-open .ion-navicon:before {
  content: "\f2ca";
}

.item.item-radio .radio-icon {
  opacity: 1;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.item.item-radio:active .radio-icon {
  opacity: 0;
  transform: scale(1.6);
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.directions.button-bar {
  margin: 0 auto;
  width: 33.333%;
}

.directions.button-bar button {
  line-height: 26px;
}

.ion-arrow-right-c.top-left:before {
  transform: rotate(-135deg);
}

.ion-arrow-right-c.top-right:before {
  transform: rotate(-45deg);
}

.ion-arrow-right-c.bottom-left:before {
  transform: rotate(-225deg);
}

.ion-arrow-right-c.bottom-right:before {
  transform: rotate(45deg);
}

#modal {
  background-color: #ef4e3a;
  border-radius: 100%;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.2);
  position: fixed;
  height: 50%;
  bottom: 0;
  opacity: 0;
  width: 700px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.expand #modal {
  background-color: #DBDBDB;
  border-radius: 0;
  border-top: solid 4px #ef4e3a;
  opacity: 1;
  z-index: 9;
}


/* CODE */

.code {
  color: #333;
  font-family: monospace;
  padding: 10px;
  white-space: pre;
}

.code-wrapper {
  padding-bottom: 30px;
  padding-top: 15px;
}

.code-wrapper::before {
  color: #1B5E20;
  font-family: "Ionicons";
  speak: none;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  content: '\f216 ';
}

.code-wrapper.active::before {
  content: '\f207 ';
}

.code-wrapper .toggle {
  color: #4CAF50;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 8px;
  text-decoration: underline;
}

.code-wrapper .code {
  opacity: 0;
  margin-top: -20px;
  height: 0;
  overflow: hidden;
  position: absolute;
  transition: 0.1s all ease-in-out;
  z-index: 9999999999;
}

.code-wrapper.code-wrapper-last .code {
  position: relative;
}

.code-wrapper.active .code {
  background: #f9f9f9;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  left: 16px;
  height: initial;
  margin-top: 15px;
  padding: 15px;
  right: 16px;
  opacity: 1;
  transition: 0.3s all ease-in-out;
  width: initial;
}

.popover {
  left: initial !important;
  right: 16px !important;
  top: 16px !important;
}

.platform-android .popover {
  margin-top: 10px;
}

.color-green {
  color: green;
}

.color-blue {
  color: blue;
}

.color-red {
  color: red;
}

div.relative {
  position: relative;
  left: -30px;
}

.round-button {
  width: 25%;
}

.round-button-circle {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 50%;
  border: 10px solid #cfdcec;
  overflow: hidden;
  background: #4679BD;
  box-shadow: 0 0 3px gray;
}

.round-button-circle:hover {
  background: #30588e;
}

.round-button a {
  display: block;
  float: left;
  width: 100%;
  padding-top: 50%;
  padding-bottom: 50%;
  line-height: 1em;
  margin-top: -0.5em;
  text-align: center;
  color: #e2eaf3;
  font-family: Verdana;
  font-size: 1.2em;
  font-weight: bold;
  text-decoration: none;
}


/* SlideShow */

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}


/* Slideshow container */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Caption text */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}


/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}


/* Select styles */

.notIE {
  position: relative;
  display: inline-block;
}

select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646e;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #ddd8dc;
  background: #fff;
}


/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;
  pointer-events: none;
}


/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}
＆＃13; 
<ion-view ng-model="title" view-title={{title}}>

  <ion-content ng-controller="Wallet_management_Ctrl">
    <br /><br /><br />

    <label class="item item-input notIE item-select">
          <div ng-if="showlang == 'en'" class="input-label" ng-model="weblist">Site</div>
          <div ng-if="showlang == 'ita'" class="input-label" ng-model="weblist">Sito</div>
          
          <select ng-model ="site">
              <option ng-repeat="item in weblist" >{{item}}</option>
          </select>
        
      </label>

    <label class="item item-input item-select">
          <div ng-if="showlang == 'en'" class="input-label" >Currency</div>
          <div ng-if="showlang == 'ita'" class="input-label" >Valuta</div>
          
            <select   ng-model="currency" >
                <option ng-if = "showBitfinex()"  ng-repeat="item in symbolsBitfinex" >{{item}}</option>
                <option ng-if = "showBinance()"  ng-repeat="item in binance" >{{item}}</option>
                <option ng-if = "showCoinmarketcap()"  ng-repeat="item in coinmarketcapsymbol" >{{item.symbol}}</option>       
                <option ng-if = "showBittrex()"  ng-repeat="item in symbolsBittrex" >{{item}}</option>          
                <option ng-if = "showPoloniex()"  ng-repeat="item in symbolsPoloniex" >{{item}}</option>          
                <option ng-if = "showCryptopia()"  ng-repeat="item in symbolsCryptopia" >{{item}}</option>          
                <option ng-if = "showBitstamp()"  ng-repeat="item in symbolsBitstamp" >{{item}}</option>          
            </select>
            
          </label>

    <div class="list">

      <label class="item item-input">
                <span ng-show="showlang == 'en'" class="input-label">Amount</span>
                <span ng-show="showlang == 'ita'" class="input-label">Quantità</span>
                <input ng-show="showlang == 'en'" type="number" placeholder="Amount" min="0" ng-model="amount">
                <input ng-show="showlang == 'ita'"  type="number" placeholder="Quantità" min="0" ng-model="amount">
            </label>

    </div>

    <div class="list">
      <label class="item item-input">
                <span ng-show="showlang == 'en'" class="input-label">Price in $ </span>
                <span ng-show="showlang == 'ita'" class="input-label">Prezzo in $ </span>
                <input ng-show="showlang == 'en'"  type="number" step="0.01" placeholder="Price in $" min="0" ng-model="price">
                <input ng-show="showlang == 'ita'"  type="number" step="0.01" placeholder="Prezzo in $" min="0" ng-model="price">
            </label>

    </div>

    <div class="col text-center">
      <button ng-show="showlang == 'en'" class="button button-block button-positive" ng-click="add()">Add</button>
      <button ng-show="showlang == 'ita'" class="button button-block button-positive" ng-click="add()">Aggiungi</button>
    </div>


    <ion-item-group>
      <ion-divider color=#9FA8DA>

        <ion-item ng-if="showlang == 'en'" class="row">
          <h3 class="col" align="center">Site</h3>
          <h3 class="col" align="center">Currency</h3>
          <h3 class="col" align="center">Amount</h3>
          <h3 class="col" align="center">Purch. P. </h3>
          <h3 class="col" align="center"></h3>
        </ion-item>
        <ion-item ng-if="showlang == 'ita'" class="row">
          <h3></h3>
          <h3 class="col" align="center">Sito</h3>
          <h3 class="col" align="center">Valuta</h3>
          <h3 class="col" align="center">Qnt.</h3>
          <h3 class="col" align="center">P. Acq. </h3>
          <h3 class="col" align="center"></h3>
        </ion-item>
        <ion-item class="row" ng-model="walletlist" ng-repeat="item in walletlist">
          <div class="col" align="center">{{item[0]}} </div>
          <div class="col" align="center">{{item[1]}} </div>
          <div class="col" align="center">{{item[2]}} </div>
          <div class="col" align="center">{{item[3]}} </div>
          <div class="col" align="center"><button class="button button-assertive button-small, ion-ios-trash" ng-click="delete(item)"></button></div>
        </ion-item>
      </ion-divider>
    </ion-item-group>


  </ion-content>

</ion-view>
＆＃13;
＆＃13;
＆＃13;

认为我应该修改CSS文件，但我不知道我该怎么做！我尝试了一些类似的错误解决了，但我没有解决问题

0 个答案:

没有答案
相关问题
最新问题