CODEWITHSUNDEEP
htmlcssjquery-mobile
nshah
nshah

Reputation: 597

How to position button in the middle

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

Upvotes: 1

Views: 421

Answers (2)

JohanVdR
JohanVdR

Reputation: 2878

The floated elements needed to be cleared.

div { overflow:hidden; }

<div>
    <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>
</div>
<ul data-role="listview" data-inset="true" id="threads">
    <li>No conversations :(
    </li>
</ul>

http://jsfiddle.net/g9UM4/2/

Upvotes: 1

Leann
Leann

Reputation: 216

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;

Upvotes: 1

Related Questions