垂直和水平居中數據列表框及其按鈕

Question

試圖通過將其對齊到垂直和水平中心來設置我的數據列表，但我只能做水平居中而不垂直。

有沒有辦法增加數據列表框的寬度並做一些樣式。請幫助..

$('#btn').click(function() { // The `$` reference here is a jQuery syntax. So we are loading jquery right before this script tag 
 
     var textval = $('#textcat').val(); 
 
     window.location = "1stlink.php?variable=" + encodeURIComponent(textval); 
 
     });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-md-6 col-md-offset-3"> 
 
    <div class="text-center"> 
 
    <input list="category" name="category" id="textcat" placeholder="Enter your area.."> 
 
    <datalist id="category"> 
 
     <option id="www.google.com" value="fruits" /> 
 
     <option id="www.fb.com" value="animals" /> 
 
     <option id="www.ymail.com" value="vechiles" /> 
 
     <option id="www.msn.com" value="ornaments" /> 
 
    </datalist> 
 
    <input id="btn" type="button" value="submit"> 
 
    
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

要垂直對齊的數據列表，使用display: flex和align-items: center。請注意，您需要在容器上設置高度以垂直對齊其內容。

剛剛注意到了關於寬度的說明。爲了調整它，你可以使用你的datalist的id來調整width屬性。

Updated Fiddle。

.container { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    height: 100vh; 
} 

Answer 2

在「Input」元素中，您可以根據自己的喜好輕鬆調整元素寬度。

請參閱此頁面瞭解更多信息 https://www.w3schools.com/css/css_form.asp

$('#btn').click(function() { // The `$` reference here is a jQuery syntax. So we are loading jquery right before this script tag 
 
    var textval = $('#textcat').val(); 
 
    window.location = "1stlink.php?variable=" + encodeURIComponent(textval); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="container"> 
 
    <div class="row" style="width: 100%; padding-top: 25%"> 
 
    <div class="col-md-6 col-md-offset-3"> 
 
     <div class="text-center"> 
 
     <input style="width: 100%" list="category" name="category" id="textcat" placeholder="Enter your area.."> 
 
     <datalist id="category"> 
 
      <option id="www.google.com" value="fruits" /> 
 
      <option id="www.fb.com" value="animals" /> 
 
      <option id="www.ymail.com" value="vechiles" /> 
 
      <option id="www.msn.com" value="ornaments" /> 
 
     </datalist> 
 
     <input id="btn" type="button" value="submit"> 
 
     </div> 
 
    </div> 
 
    </div>