HTML CSS Button text totally not centered

Question

I created the following button:

.project-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 200px 75%;
    column-gap: 50px;
}

.left-side {
    display: block;
    padding-left: 40px;
}

.searchbar-box {
    padding-top: 50px;
    display: flex;
    height: 40px;
    align-items: center;
}

.searchbar-box input[type=text] {
    width: 70%;
}

.searchbar-box input[type=text], select {
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.searchbar-box input[type=image] {
    padding-left: 10px;
    height: 30px;
    transform: scale(1);
}

.searchbar-box input[type=image]:hover {
    transform: scale(1.25);
    transition: 0.3s ease transform, 0.3s ease opacity;
}

#btnAddProject {
    align-items: center;
    font-size: 50px;
    height: 50px;
    /*border: none;*/
    background-color: transparent;
    transform: scale(1);
    transition: 0.3s ease transform, 0.3s ease opacity;
}

#btnAddProject:hover {
    color: rgb(28, 143, 238);
    transform: scale(1.25);
    transition: 0.3s ease transform, 0.3s ease opacity; 
}

<div class="project-grid">
    <div class="left-side">
        <div class="searchbar-box" style="padding-bottom: 65px;">
            <input type="text" id="searchBar" name="txtSearch" class="searchbar" placeholder="Search...">
            <button id="btnAddProject" onClick="projectListController.addNewProject()">+</button>
        </div>

But as you can see the + in the button isn't centered vertical perfectly. I already tried setting: vertical-align: center; and align-items: center; but that doesn't change anything. How can I center the button text, no matter the screen size?

Answer 1

Set display:flex on your button:

DEMO:

.project-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 200px 75%;
    column-gap: 50px;
}

.left-side {
    display: block;
    padding-left: 40px;
}

.searchbar-box {
    padding-top: 50px;
    display: flex;
    height: 40px;
    align-items: center;
}

.searchbar-box input[type=text] {
    width: 70%;
}

.searchbar-box input[type=text], select {
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.searchbar-box input[type=image] {
    padding-left: 10px;
    height: 30px;
    transform: scale(1);
}

.searchbar-box input[type=image]:hover {
    transform: scale(1.25);
    transition: 0.3s ease transform, 0.3s ease opacity;
}

#btnAddProject {
    align-items: center;
    font-size: 50px;
    height: 50px;
    /*border: none;*/
    background-color: transparent;
    transform: scale(1);
    transition: 0.3s ease transform, 0.3s ease opacity;
    
    /**ADDED**/
    display: flex;
}

#btnAddProject:hover {
    color: rgb(28, 143, 238);
    transform: scale(1.25);
    transition: 0.3s ease transform, 0.3s ease opacity; 
}

<div class="project-grid">
    <div class="left-side">
        <div class="searchbar-box" style="padding-bottom: 65px;">
            <input type="text" id="searchBar" name="txtSearch" class="searchbar" placeholder="Search...">
            <button id="btnAddProject" onClick="projectListController.addNewProject()">+</button>
        </div>

Answer 2

You can use display: flex; and justify-content: center; along with align-items: center;. I also enclosed '+' with span so it makes easier to style the text. ( I also used -ve margin-top, play with it if you want to).

.project-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 200px 75%;
    column-gap: 50px;
}

.left-side {
    display: block;
    padding-left: 40px;
}

.searchbar-box {
    padding-top: 50px;
    display: flex;
    height: 40px;
    align-items: center;
}

.searchbar-box input[type=text] {
    width: 70%;
}

.searchbar-box input[type=text], select {
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.searchbar-box input[type=image] {
    padding-left: 10px;
    height: 30px;
    transform: scale(1);
}

.searchbar-box input[type=image]:hover {
    transform: scale(1.25);
    transition: 0.3s ease transform, 0.3s ease opacity;
}

#btnAddProject {
    display: flex;
    align-items: center;
    justify-content:center;
    font-size: 50px;
    height: 50px;
    /*border: none;*/
    background-color: transparent;
    transform: scale(1);
    transition: 0.3s ease transform, 0.3s ease opacity;
}

#btnAddProject span{
  margin-top: -6px;
}

#btnAddProject:hover {
    color: rgb(28, 143, 238);
    transform: scale(1.25);
    transition: 0.3s ease transform, 0.3s ease opacity; 
}

<div class="project-grid">
    <div class="left-side">
        <div class="searchbar-box" style="padding-bottom: 65px;">
            <input type="text" id="searchBar" name="txtSearch" class="searchbar" placeholder="Search...">
            <button id="btnAddProject" onClick="projectListController.addNewProject()">
            <span>+</span></button>
        </div>

Answer 3

You forgot to add display: flex to #btnAddProject.

.project-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 200px 75%;
    column-gap: 50px;
}

.left-side {
    display: block;
    padding-left: 40px;
}

.searchbar-box {
    padding-top: 50px;
    display: flex;
    height: 40px;
    align-items: center;
}

.searchbar-box input[type=text] {
    width: 70%;
}

.searchbar-box input[type=text], select {
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.searchbar-box input[type=image] {
    padding-left: 10px;
    height: 30px;
    transform: scale(1);
}

.searchbar-box input[type=image]:hover {
    transform: scale(1.25);
    transition: 0.3s ease transform, 0.3s ease opacity;
}

#btnAddProject {
    display: flex;
    align-items: center;
    font-size: 50px;
    height: 50px;
    /*border: none;*/
    background-color: transparent;
    transform: scale(1);
    transition: 0.3s ease transform, 0.3s ease opacity;
}

#btnAddProject:hover {
    color: rgb(28, 143, 238);
    transform: scale(1.25);
    transition: 0.3s ease transform, 0.3s ease opacity; 
}

<div class="project-grid">
    <div class="left-side">
        <div class="searchbar-box" style="padding-bottom: 65px;">
            <input type="text" id="searchBar" name="txtSearch" class="searchbar" placeholder="Search...">
            <button id="btnAddProject" onClick="projectListController.addNewProject()">+</button>
        </div>