Centrer verticalement un bouton dans un tableau avec bootstrap 4

Pour centrer verticalement un bouton dans un tableau avec bootstrap 4 on peut utiliser

class="align-middle"

exemple:

<!DOCTYPE html>
<html lang="en">

<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>

<div class="container">

<div class="row; mt-5">
<div class="col-md-8">


    <table class="table table-striped">
        <tbody>
        <tr>
            <td>
                <p>John Doe</p>
                <p style="color:grey;font-size:14px;text-align:justify">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                </p>
            </td>
            <td class="align-middle" style="text-align: right">
                <a href='#'>
                    <button type="button" class="btn btn-outline-info btn-sm m-0 waves-effect">
                        View
                    </button>
                </a>        
            </td>
        </tr>
        <tr>
            <td>
                <p>John Doe</p>
                <p style="color:grey;font-size:14px;text-align:justify">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                </p>
            </td>
            <td class="align-middle" style="text-align: right">
                <a href='#'>
                    <button type="button" class="btn btn-outline-info btn-sm m-0 waves-effect">
                        View
                    </button>
                </a>        
            </td>
        </tr>
        <tr>
            <td>
                <p>John Doe</p>
                <p style="color:grey;font-size:14px;text-align:justify">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                </p>
            </td>
            <td class="align-middle" style="text-align: right">
                <a href='#'>
                    <button type="button" class="btn btn-outline-info btn-sm m-0 waves-effect">
                        View
                    </button>
                </a>        
            </td>
        </tr>
        <tr>
            <td>
                <p>John Doe</p>
                <p style="color:grey;font-size:14px;text-align:justify">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                </p>
            </td>
            <td class="align-middle" style="text-align: right">
                <a href='#'>
                    <button type="button" class="btn btn-outline-info btn-sm m-0 waves-effect">
                        View
                    </button>
                </a>        
            </td>
        </tr>               
        </tbody>
    </table>

</div>
</div>
</div>

</body>

</html>

Références

Liens	Site
grid	getbootstrap
Vertical Align Center in Bootstrap 4	stackoverflow
getbootstrap	stackoverflow
Vertical alignment in Bootstrap 4	stackoverflow
Center Contents of Bootstrap row container	stackoverflow

Salut, je suis Ben, le fondateur de moonbooks.org. Je travaille en tant que chercheur spécialisé dans la télédétection par satellite de la Terre, en me concentrant particulièrement sur la détection des incendies à l'aide des capteurs VIIRS et ABI. Mes domaines d'expertise incluent Python, l'apprentissage automatique et la science ouverte. N'hésitez pas à me contacter si vous remarquez des erreurs sur le site. Je m'efforce constamment de l'améliorer. Merci !

Centrer verticalement un bouton dans un tableau avec bootstrap 4

Références

Benjamin

Skills