0

I have a search input, I want a clear button at the end of the input. A button is a separate element, tell me how to use CSS correctly to place this button vertically in the center. Here is an example of the markup itself

<form class="search">
    <input type="search" class="search-input">
    <button class="search-delete-button">
        x
    </button>
</form>

I have this option:

.search {
    position: relative;
}

.search-delete-button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(-50%, -50%);
}

tell me how much is the solution right or is there a better option?

Vlad
  • 9
  • 2

1 Answers1

-1

I think you need to use margin-top:auto and margin-bottom:auto.

p0150n
  • 3
  • 5