Issue
I have to make an <input>
that's larger than the usual. The height must be 55px. I am having trouble vertically aligning the glyph image inside the orange square. It looks like this:
I have tried using margin-top on my <i>
element but it moves the rectangle down too, I need to move just the glyph. It looks like this:
Please let me know if you have any ideas on how I could vertically center the glyph inside the orange box. I have setup a jsfiddle at https://jsfiddle.net/vteL375o/1/
HTML:
<div class="container">
<div class="form-group has-feedback" style="margin-top:20px;">
<input type="text" id="search-query" class="form-control not-rounded search-input">
<i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
</div>
</div>
CSS:
.not-rounded {
border-radius: 0;
}
.search-input {
font-size: 20px;
margin-bottom: 50px;
height: 55px;
}
.glyph-class {
height: 55px;
width: 55px;
color:white;
background-color: orange;
font-size: 20px;
}
Solution
You can use Flexbox
for this, or inline-flex
in this case.
.not-rounded {
border-radius: 0;
}
input.search-input {
font-size: 20px;
margin-bottom: 50px;
height: 55px;
}
.glyphicon.glyphicon-search.form-control-feedback.glyph-class {
height: 55px;
width: 55px;
color: white;
background-color: orange;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="form-group has-feedback" style="margin-top:20px;">
<input type="text" id="search-query" class="form-control not-rounded search-input">
<i class="glyphicon glyphicon-search form-control-feedback glyph-class" style=""></i>
</div>
</div>
Answered By - Nenad Vracar Answer Checked By - Mary Flores (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.