Вертикально центрировать все элементы строки таблицы в Bootstrap - PullRequest
Новая
       1

Вертикально центрировать все элементы строки таблицы в Bootstrap

1 голос
/ 07 октября 2019

Я не могу выровнять по вертикали все различные типы элементов в моей строке таблицы Bootstrap. Я хочу, чтобы раскрывающийся список «Выбор», текст описания и кнопка отображались по центру. Что мне нужно сделать, чтобы это исправить?

what it looks like

Вот код: 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>testing...</title>
    <style>
        td {
            height: 1em;
            vertical-align: middle;
        }
    </style>
  </head>
  <body>
    <div style="margin-left: 0px">    
    <table class="table table-striped table-hover">
        <colgroup>
                <col span="1" style="width: 4em">
                <col span="1" style="width: 15em">
                <col span="1" style="width: 4em">
        </colgroup>
        <tbody>
            <tr scope="row"><td>
                    <select class="form-control" id="qty">
                      <option>0</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                    </select>
            </td><td>Apples</td><td>10lb</td><td><button type="button" class="btn btn-primary btn-sm">Add</button></td></tr>        
    </table>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Ответы [ 2 ]

1 голос
/ 07 октября 2019

установите vertical-align:middle в данные таблицы классов .table. 

    .table td {
        height: 1em;
        vertical-align: middle;
    }


  <!doctype html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
        <title>testing...</title>
    	<style>
    		.table td {
    		    height: 1em;
    			vertical-align: middle;
    		}
    	</style>
      </head>
      <body>
    	<div style="margin-left: 0px">	  
        <table class="table table-striped table-hover">
    		<colgroup>
    				<col span="1" style="width: 4em">
    				<col span="1" style="width: 15em">
    				<col span="1" style="width: 4em">
    		</colgroup>
    		<tbody>
    			<tr scope="row">
                <td>
    				    <select class="form-control" id="qty">
    				      <option>0</option>
    				      <option>1</option>
    				      <option>2</option>
    				      <option>3</option>
    				    </select>
    			</td>
                <td>Apples</td>
                <td>10lb</td>
                <td><button type="button" class="btn btn-primary btn-sm">Add</button></td>
                </tr>    	
    	</table></div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      </body>
    </html>

Решение 2: вы также можете использовать! Важное для переопределения свойств CSS. 

td {
     height: 1em;
     vertical-align: middle !important;
        }


<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>testing...</title>
  <style>
    td {
      height: 1em;
      vertical-align: middle !important;
    }
  </style>
</head>

<body>
  <div style="margin-left: 0px">
    <table class="table table-striped table-hover">
      <colgroup>
        <col span="1" style="width: 4em">
        <col span="1" style="width: 15em">
        <col span="1" style="width: 4em">
      </colgroup>
      <tbody>
        <tr scope="row">
          <td>
            <select class="form-control" id="qty">
              <option>0</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
            </select>
          </td>
          <td>Apples</td>
          <td>10lb</td>
          <td><button type="button" class="btn btn-primary btn-sm">Add</button></td>
        </tr>
    </table>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Решение 3: с помощью начальной загрузки добавьте align-middle класс к тд. 

<tr scope="row">
            <td class="align-middle">
                    <select class="form-control" id="qty">
                      <option>0</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                    </select>
            </td>
            <td  class="align-middle">Apples</td>
            <td  class="align-middle">10lb</td>
            <td  class="align-middle"><button type="button" class="btn btn-primary btn-sm">Add</button></td>
            </tr>       


<!doctype html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
        <title>testing...</title>
    	<style>
    		 td {
    		    height: 1em;
    		}
    	</style>
      </head>
      <body>
    	<div style="margin-left: 0px">	  
        <table class="table table-striped table-hover">
    		<colgroup>
    				<col span="1" style="width: 4em">
    				<col span="1" style="width: 15em">
    				<col span="1" style="width: 4em">
    		</colgroup>
    		<tbody>
    			<tr scope="row">
                <td class="align-middle">
    				    <select class="form-control" id="qty">
    				      <option>0</option>
    				      <option>1</option>
    				      <option>2</option>
    				      <option>3</option>
    				    </select>
    			</td>
                <td  class="align-middle">Apples</td>
                <td  class="align-middle">10lb</td>
                <td  class="align-middle"><button type="button" class="btn btn-primary btn-sm">Add</button></td>
                </tr>    	
    	</table>
      </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      </body>
    </html>
0 голосов
/ 07 октября 2019 
<table class="table table-striped table-hover" **row**>
        <colgroup>
                <col span="1" style="width: 4em">
                <col span="1" style="width: 15em">
                <col span="1" style="width: 4em">
        </colgroup>
        <tbody>
            <tr scope="row"><td>
                    <select class="form-control" id="qty">
                      <option>0</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                    </select>
            </td><td>Apples</td><td>10lb</td><td><button type="button" class="btn btn-primary btn-sm">Add</button></td></tr>        
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...