Elevate the position of the glyphicon div

I'm encountering an issue where I can't seem to align the glyphicon to the center of the input field it's located next to. See below for the code snippet:

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

<head>
    <meta charset="UTF-8>

    <!-- Bootstrap Core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        .mydiv {
            font-size: 100px;
        }

        .glyphicon-search {
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="mydiv">
        <input class="input" type='text' placeholder="ABC" autocomplete="off"><div class="glyphicon glyphicon-search"></div>
    </div>
</body>

</html>

Here is a visual representation of the current layout: https://i.sstatic.net/fy8zH.png

I'm looking to adjust the position of the icon slightly higher as indicated by the arrow above. Any thoughts on how this can be achieved?

htmlcsstwitter-bootstrap

Answer №1

To align the icon vertically, you can use the vertical-align property on the icon itself or apply 

display: flex; align-items: center
to its parent element for overall vertical alignment. Additionally, you have the option to fine-tune the positioning by using transform: translateY();

In this example, I am using flex with the other two options commented out.

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

<head>
  <meta charset="UTF-8>

  <!-- Bootstrap Core CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

  <!-- Bootstrap Core JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
    .mydiv {
            font-size: 100px;
        }

        .glyphicon-search {
            font-size: 30px;
          /*vertical-align: middle;
          transform: translateY(-10px);*/
        }
    .mydiv {
      display: flex;
      align-items: center;
    }
  </style>
</head>

<body>
  <div class="mydiv">
    <input class="input" type='text' placeholder="ABC" autocomplete="off">
    <div class="glyphicon glyphicon-search"></div>
  </div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it feasible to detect whether the initiation of a web worker is unsuccessful?

In the scenario presented, there is an issue with the web worker code (undefined reference) and the try { ... } catch(e) { ...} statement doesn't effectively handle it. The console displays the message Why am I here ?. Below is the HTML file content: ...

htmlerror-handlingweb-worker

Having trouble retrieving the contents of a <div> tag within a JavaScript function

Javascript Code In First ContentPlaceHolder :- <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> <script type="text/javascript" > function PrintElem(elem) { alert(elem); Popup($(elem).html()); } ...

c#javascriptjqueryasp.nethtml

Expanding the size of a text area input within a form using CSS and

How can I adjust the size of the text area in the Comment section to match the full width of the section, starting from the beginning instead of the middle? You can find the code here. HTML <body bgcolor="#00BCD4"> <div> <h1>Co ...

htmlcssformstextareawindow-resize

Display a div using jQuery when it reaches halfway the height of another div

I have a code snippet that hides the .wp-filter when reaching the bottom of the .wpgb-layout jQuery(window).bind('scroll', function() { if(jQuery(window).scrollTop() >= jQuery('.wpgb-layout').offset().top + jQuery('.w ...

htmljquery

Applying Compiled CSS file in Node.js using Express and SASS not working as expected

Recently, I've delved into utilizing NodeJS with Express to serve my pug files. In addition, I decided to incorporate the "express-sass-middleware" to compile and serve the scss/css files in my project. While everything seems to be functioning as expe ...

cssnode.jsexpresssasspug

Struggling with creating a static table header in HTML, dealing with problems related to scrolling and visibility?

I am currently attempting to create an HTML table with a fixed header and a horizontal scrollbar that appears when necessary. Utilize the provided JSFiddle link for reference: html, body { margin:0; padding:0; height:100%; } .horizontalscroll ...

javascriptjquerycsshtml

Issue with active class in Bootstrap navigation tabs

Check out the following HTML snippet: <div class="process"> <h2 style="text-transform: uppercase;">The Application Process</h2> <br><br> <div class="row"> <div class="col-md-3" align="left"& ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Image in Bootstrap not showing up on smaller devices

I am facing an issue where an image displays properly on desktop view but turns into 0x0 dimensions when viewing from a mobile device. I have been unable to determine the root cause of this problem. The website is built using Bootstrap 4 and you can observ ...

htmlcssimagebootstrap-4

Arrange the divs as though they were keys on a piano

For the past few hours, I've been attempting to align 4 div elements as they appear on a keyboard layout, but I'm struggling to get it right... I prefer not to use absolute positioning since I have 3 groups of four divs. These divs are meant to ...

css

The CSS overflow hidden attribute is leading to issues with the functionality of the Google Maps API

I am struggling to showcase a Google map as a tooltip using the qTip jQuery plugin. I have multiple elements on my page and need to assign overflow: hidden to all of them. Everything is functioning properly, except for the fact that the Google map toolti ...

cssgoogle-maps-api-3overflowhidden

Using CSS to implement a star rating system in PHP HTML can yield impactful results

<div class=" rating "> <input type="radio" id="star2" name="rating" value="2" /><label for="star2" disabled title="Sucks big tim">2 stars</label> </div> I have successfully implemented a star rat ...

phphtmlcss

Waiting for jQuery to load until the entire document is fully loaded

When working on my web application, I encountered an issue with loading a large document into an iframe. This document contains important information that affects the title, buttons, and text displayed on the page. I want to display an animated gif in thre ...

jqueryhtmliframe

Printing CSS in ASP.NET without a print dialog box or a pop-up confirmation message after successful printing

My goal is to create a list of greeting cards, each printed to a specific size (A4 folded down the longer edge), using HTML and CSS. I want the cards to be rotated 90° on the page. Ideally, I'd like to print the list without viewing the HTML and bypa ...

asp.nethtmlcssprinting

Is it possible to enable zooming on a streamgraph?

I came across an interesting example of a streamgraph on this link. It got me thinking - can a streamgraph be made zoomable, similar to a line chart like in this zoomable line chart? I haven't been able to find any examples of a "zoomable streamgraph" ...

javascripthtmld3.jsstream-graph

The custom pagination feature in Addsearch UI always default to displaying the first page of search

I am currently using addsearch-ui version 0.7.11 for my project. I have been attempting to integrate a customized pagination function based on this example template. However, I have encountered an issue where the arrow buttons always navigate to the first ...

javascripthtmlnpmpaginationhandlebars.js

Tag - A guide on setting the required attribute for a tag

Currently, I am utilizing Jquery Tag it in order to manage tags and save the values in a database. My challenge lies in using jQuery to make the myTags field required, ensuring that at least one tag is added before proceeding with the save operation. This ...

javascriptjqueryhtmltag-it

An SVG with a single enigmatic path/shape featuring a perplexing left margin or empty space. Not contained within an

I created a unique shape in Illustrator and adjusted the artboard to fit the shape perfectly, eliminating any excess white space. I double-checked this process to ensure accuracy. Upon opening the design in Chrome and inspecting it, I noticed that when ho ...

csssvg

When utilizing CSS Paged Media, a div element can be forced to break onto the next

Seeking your expertise, I'm encountering an issue where the div's bottom border breaks onto the next page when a print preview is initiated in Internet Explorer 11: In any case, I would greatly appreciate it if we could achieve a 1px border aro ...

csshtmlprintingcss-paged-media

Is there a way to incorporate HTML, CSS, and PHP into emails with PHPMailer?

Even though I have added CSS to the .php file, the emails I send are not displaying any CSS. I have set $mail->isHTML(true); and while HTML works, the CSS and PHP variables do not. This is the current appearance: https://i.sstatic.net/dLH8j.jpg. This ...

phphtmlcssphpmailer

Google Chrome extension with Autofocus functionality

I developed a user-friendly Chrome extension that allows users to search using a simple form. Upon opening the extension, I noticed that there is no default focus on the form, requiring an additional click from the user. The intended behavior is for the ...

javascripthtmlgoogle-chromegoogle-chrome-extension