CODEWITHSUNDEEP
htmlcss
Broda
Broda

Reputation: 15

How can i align button with input in a div, using CSS.

Not using bootstrap, I am building it from scratch, that is why I have an image as a background to a button. Any other suggestions on that? My HTML & CSS: 

.searchcontainer .content{  
    border-color: rgb(76, 158, 21);
    width: 60%;
    height: auto;
    position: relative;
    
}
#askinfo {
    font-family: inherit;
    font-size: 14px;  
    font-size-adjust: initial;
    top:0;
    margin:1%;
    height:auto;
    padding: 1%;
    width: 24%;
    
}
.content button {
    position: relative;
    background-color: rgba(76, 158, 21, 0);    
    max-width: 4%;
    height: 100%; 
 }
 .content button img {
    position: relative;
    width: 100%;
    height: 100%;  
}
<div class="searchcontainer">
        <form class="content animate">
            <input type="text" id="askinfo" placeholder="From?" required>
           
                    <button>
                        <img src="replace.png">
                    </button>
            
            <input type="text" id="askinfo" placeholder="To?" required>
            <input type="text" id="askinfo" placeholder="When?" required>
            
                <button>        
                    <img src="search.png">
                </button>  
        </form>
    </div>

The buttons are always sticking to the top of the div, I want them to be in a line with the input fields. I do not know that the problem is. Thanks!

Upvotes: 0

Views: 425

Answers (3)

Maleesha Perera
Maleesha Perera

Reputation: 38

You can align the button using CSS

#askinfo {
    text-align: center;
}

Upvotes: 0

Mano
Mano

Reputation: 1

I think its caused by the image. You should try to use a background image in css instead of a image in HTML.

Upvotes: 0

fortunee
fortunee

Reputation: 4332

This is happening because the content of the image you're loading inside the button element. Try loading that image with a background-image property in the css like this.

.content:nth-child(2) {
    background: url("./replace.png") no-repeat
 }

.content:nth-child(5) {
    background: url("./search.png") no-repeat
 }

Then remove that image from the button in the html

Upvotes: 1

Related Questions