How to position button in the middle


Tags: html,css,jquery-mobile

Problem :

I am using jQuery Mobile to create my mobile application. I have a plus button which appears like this:

enter image description here

The issue is that it is down, touching the list item. How do I make the button positioned midway between the list item and the horizontal line above it? I attempted to use absolute positioning using css, which did not work.

Here is my code:

<span style="float:left;color:black;font-weight:bold;font-size:24px"><label for="newpostbutton">Posts</label></span>
<span style="float:right;"><a href="#" data-role="button" id="newpostbutton" data-icon="plus" data-iconpos="notext"></a></span>
<br>
<ul data-role="listview" data-inset="true" id="threads">
    <li>No conversations :(</li>
</ul>

Any help would be appreciated :D



Solution :

nshah, you can always give your button a negative margin-top and play around with the numbers. But it looks like there is probably more going on with the default button styles. I would look there first.

margin-top: -15px;

    CSS Howto..

    How to move CSS inline with PreMailer.Net whilst using MvcMailer for sending HTML emails

    how to make the background the same as the div size in css

    How to select multiple elements using CSS

    How to get the root directory of wordpress in css

    how to select css class attributes from mootools,getStyle()?

    How do I vertically center an img in a div?

    How to center a span in a div

    How can I make my container transparent without making the whole site transparent too?

    How to create a horizontal scroll bar when shrinking the window

    how to make moving spinner's edges rounded css

    Slideshow flickering image on :hover

    How to create a right border that's only 70% of its actual size?

    How to pivot image with CSS and Javascript

    How to prevent divs from overlapping?

    How to override css grouped styles

    how to align text input in Angular-Material tool bar?

    Javascript (shopping cart) showing up under other content?

    Opacity on hover of parent is being transfered to submenu; how to prevent this using CSS

    HTML/CSS How to apply CSS to “a” with custom data attribute?

    How to load an onScroll background image before user scrolls to them?

    How to default toggle to open using css/jquery?

    Javascript how to use external Css sheet

    How to make xsl show only images/captions from xml

    How to run CSS text animation in a sequence. (one line of text after another)

    How to apply effect just to background image and not text

    How to position the scaled elements (jQuery, css)

    How to align buttons below and right-aligned to a HTML list?

    how to replicate pinterest.com's absolute div stacking layout [closed]

    How do I make XAMPP use the paths from my Wordpress themes folder?

    How to id dom table so I can position it on page?