How to make p element and buttons aligned horizontally with CSS

Question

I have some text (p element) and two buttons next to it. However, both buttons dont look center aligned horizontally at the same level as the text (p element). The buttons seem slightly below the text.

How to make them look like they are on the same level horizontally?

Code snippet:

body {
    background-color: rgb(44, 63, 83);
}

#timer {
    margin-top: 1%;
}

#time-p {
    color: white;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 3rem;
    display: inline-block;
    color: black;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <!-- My own CSS -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="timer">
        <p id="time-p">00:00:00</p>
        <!-- Start and reset buttons -->
        <button class="btn btn-success btn-lg">Start</button>
        <button class="btn btn-danger btn-lg">Reset</button>
    </div>

    <!-- jQuery 3.5.1 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- BootStrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous"></script>
</body>

</html>

score 2 · Accepted Answer · answered Mar 10 '21 at 07:28

Use 'vertical-align' and adjust the default 'margin-bottom' of the 'p' tag.

body {
    background-color: rgb(44, 63, 83);
}

#timer {
    margin-top: 1%;
}

#time-p {
    color: white;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 3rem;
    display: inline-block;
    color: black;
    vertical-align: middle;
    margin-bottom: 0;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <!-- My own CSS -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="timer">
        <p id="time-p">00:00:00</p>
        <!-- Start and reset buttons -->
        <button class="btn btn-success btn-lg">Start</button>
        <button class="btn btn-danger btn-lg">Reset</button>
    </div>

    <!-- jQuery 3.5.1 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- BootStrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous"></script>
</body>

</html>

score 2 · Answer 2 · answered Mar 10 '21 at 07:35

wrap p tag in d-flex class & align-items-center

body {
    background-color: rgb(44, 63, 83);
}

#timer {
    margin-top: 1%;
}

#time-p {
    color: white;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 3rem;
    display: inline-block;
    color: black;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timer</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <!-- My own CSS -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="d-flex align-items-center" id="timer">
        <p class="mb-0 mr-1" id="time-p">00:00:00</p>
        <!-- Start and reset buttons -->
        <button class="btn btn-success btn-lg mr-1">Start</button>
        <button class="btn btn-danger btn-lg">Reset</button>
    </div>

    <!-- jQuery 3.5.1 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- BootStrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous"></script>
</body>

</html>

score 1 · Answer 3 · answered Mar 10 '21 at 07:28

The modern way of doing things like that is to use Flexbox. Check out a basic tutorial on Flexbox here: https://www.w3schools.com/css/css3_flexbox.asp

And an excellent game that helps to learn Flexbox here: http://www.flexboxdefense.com

Essentially you wrap your items within a div that has a class with the property display: flex; applied. Then each of your items within will appear horizontally on the screen. You can use align-items: center; to get the correct alignment and justify-content: space-between; or justify-content: space-around; to spread the items across the row nicely.

So your #timer block would look something like:

#timer {
    margin-top: 1%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

How to make p element and buttons aligned horizontally with CSS

3 Answers3