How to vertically align the elements within a DIV in jQuery Mobile

Is there a way to vertically align the content of a jQuery grid's block so that it is centered with another element in the same row?

<div class="ui-grid-a" style="border:1px solid">
<div class="ui-block-a" style="vertical-align:middle" ><span>My Text</span></div>
<div class="ui-block-b" >
<div data-role="fieldcontain">
   <select name="select-choice-1" id="select-choice-1">
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
    <option value="express">Express: next day</option>
    <option value="overnight">Overnight</option>
   </select>
  </div>
 </div>
</div><!-- /grid-a -->

http://jsfiddle.net/neilghosh/9HNjf/1/

I am looking for a CSS solution that would allow me to display "My Text" at the center of the box, aligned with the select box on the right. Any suggestions to achieve this without using fixed pixels for top margin, considering browser resizing?

jqueryhtmlcssjquery-mobile

Answer №1

An innovative approach using jQuery to dynamically adjust the position of the text container div:

<div class="ui-grid-a" style="border:1px solid">
    <div class="ui-block-a" style="position:relative">
        <div id="tc" style="position:absolute">My Text</div>
    </div>
    <div class="ui-block-b">
        <div data-role="fieldcontain">
            <select name="select-choice-1" id="select-choice-1">
            <option value="standard">Standard: 7 day</option>
            <option value="rush">Rush: 3 days</option>
            <option value="express">Express: next day</option>
            <option value="overnight">Overnight</option>
            </select>
        </div>
    </div>
</div>

The javascript implementation is as follows:

var rowHeight = $(".ui-block-b").height();
$(".ui-block-a").height(rowHeight);
var tcHeight = $("#tc").height();
var top = rowHeight / 2 - tcHeight / 2;
$("#tc").css('top',top);

To try it out yourself, visit: http://jsfiddle.net/giofiddle/9HNjf/4/

Answer №2

I encountered a similar issue where I had a grid with three boxes, each containing buttons and text. The text in the middle box was aligning to the top while the buttons were vertically centered thanks to JQM. Upon inspecting, I found that the buttons had the class ui-btn-inner applied to them. Here is how I resolved it:

<div class="ui-block-b" style="text-align: center;">
    <div class="ui-btn-inner">my corrected text</div>
</div>

Answer №3

To properly position them, you might have to ensure they are set with the same height (refer to ).

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

Bootstrap Modal closing problem

While working on a bootstrap modal, I encountered an issue where the modal contains two buttons - one for printing the content and another for closing the modal. Here is the code snippet for the modal in my aspx page: <div class="modal fade" id="myMod ...

javascriptjqueryhtmlcsstwitter-bootstrap

Button click does not fill in Jquery Datepicker?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link > <script type="text/javascript" src= ...

javascriptjqueryasp.netdatepicker

Question: How can I use the jQuery datepicker to ensure that the selected date remains in the

I recently created a webpage using a combination of HTML, PHP, and jQuery. The PHP script is designed to load all data where the date matches the one selected in the text input field generated by the jQuery datepicker. However, I encountered a problem whe ...

javascriptphpjqueryhtmldatepicker

What is the reasoning behind placing the CSS file in the header section and the JS file at the bottom

Hey there, I need some help. Why is the CSS file included in the header section but the JS file at the end of the page? Can I also include the CSS file at the bottom of the page? <!DOCTYPE html> <html> <head> <link type= ...

css

Looking for assistance in streamlining JavaScript for loops?

I am currently working on a project involving a random image generator that displays images across up to 8 rows, with a maximum of 240 images in total. My current approach involves using the same loop structure to output the images repeatedly: var inden ...

javascriptjqueryreactjs

Issue with mouseout gap in Microsoft Edge when using the <select> element

A noticeable gap appears in Microsoft Edge between the <select> menu and its options when expanding the menu, as shown here: https://i.stack.imgur.com/SprJ2.png This particular issue can cause problems with the mouseout event due to inconsistent be ...

javascripthtmlcssmicrosoft-edge

Is there a way to automate the uploading of captcha images to this solving service using Python?

Currently, I am working on a Python program with the goal of solving captchas on a website. My plan is to integrate 2captcha into the solution. Using Selenium, I have managed to write a Python script that fulfills all required tasks except for solving the ...

pythonhtmlseleniumselenium-webdriver2captcha

transferring a variable that has already been utilized through ajax

I have implemented a jquery datepicker on my webpage. Next to the datepicker, there is a section that displays events when you hover over a date. I was able to successfully get the date into the header of this section. However, I am struggling with transfe ...

phpjqueryajaxdatepicker

Enhance React scrollbar functionality without relying on third-party dependencies

Currently working on enhancing the appearance of the scrollbar within my ReactJS project. Specifically, I am aiming for a design similar to this example: https://i.stack.imgur.com/2Q0P4.png Experimented with CSS properties like -webkit-scrollbar, -webki ...

javascriptcssreactjsscrollbar

CSS modified after opening a modal dialog that has loaded external HTML content

Within my ASP.NET MVC project, I am utilizing a tab wizard. On one of the tabs, I trigger a modal dialog by loading HTML content from an external API. However, once I close the wizard and navigate to the next tab, the table style (specifically border color ...

javascripthtmlcssbootstrap-4

Which internet browsing engine does Android leverage for phonegap applications?

Currently, I'm working on incorporating CSS animations into a phone gap project. Surprisingly, the animations work flawlessly on an iOS device but encounter issues on my Android device. Strangely, elements like dashed borders are not even showing up. ...

csscordova

Proper techniques for enlarging a background image using CSS

When utilizing the CSS scale() function along with a transition and transform on a div element that contains a high-quality background image, I noticed that the image becomes blurry when zoomed in. How can I achieve a smoother zoom effect for high-quality ...

htmlcsszooming

Handling 404 errors in Nginx when using try_files directive for .html files

When presented with this SEF URL /attrazioni/madame-tussauds-londra.html, I am required to retrieve the actual URL which is /index.php?q=/attrazioni/madame-tussauds-londra.html I currently have a directive in place, however, it functions correctly only fo ...

phphtmlnginxurl-rewriting

transforming a div container into an inline element using CSS

Hey there! I'm facing an issue with CSS where I am trying to change a div tag into inline. <div id="menu1"> <ul> <a href="#"> <li> one</li> </a> <a href="#"> <li> two</li> </a> <a h ...

htmlcss

The model property consistently receives a false value from a checkbox, even when it is checked. The data is retrieved in JSON format from an

After submitting a form, the following code will be triggered: $.ajax({ url: '/Company/CheckError', type: 'POST', data: JSON.stringify($(this).serializeObject()), dataType: 'json', proc ...

jsonasp.net-mvc-3jquery

How to smoothly transition a div from one location to another using animations in an Ionic3-Angular4 application

I'm attempting to incorporate some animation into my Ionic 3 mobile app. Specifically, I want to shift a div from one location to another. In the code snippet provided below, I am looking to move the div with the "upper" class after the timeline-item ...

javascriptangularcssionic2angular-animations

What is the best way to add the current date to a database?

code: <?php session_start(); if(isset($_POST['enq'])) { extract($_POST); $query = mysqli_query($link, "SELECT * FROM enquires2 WHERE email = '".$email. "'"); if(mysqli_num_rows($query) > 0) { echo '<script&g ...

javascriptphpjqueryhtmlcss

Achieve an exceptional design by organizing the elements to gracefully drift from the left side to the right, seamlessly cascading from

I am currently working on a CSS and HTML layout, and I have a specific vision for how I want the layout to be displayed. It should appear from left to right and top to bottom, as shown in this image: https://i.stack.imgur.com/Q0VmR.jpg Each box within the ...

htmlcsslayout

Fixed-positioned left column in a styled table

Struggling to implement the solution provided in this popular topic on Stack Overflow about creating an HTML table with a fixed left column and scrollable body. The issue arises from my use of the thead and tbody tags, which are not addressed in the exampl ...

htmlcss

Sliding background in a multi-column accordion

I've hit a roadblock with this project. I'm working on setting up a FAQ section that needs to display its items in two columns on desktop, each with a drop shadow effect using Bootstrap 4. I've experimented with Flexbox and CSS columns with ...

htmlcssgridaccordion