You can use: `line-height`!

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .box {
      color: #fff;
      background: #444;
      height:      40px;  
      line-height: 40px; /* Same as height  */
    }

&lt;!-- language: lang-html --&gt;

    &lt;p class=&quot;box&quot;&gt;some text &lt;input type=&quot;button&quot; value=&quot;Button&quot; /&gt;&lt;/p&gt;

&lt;!-- end snippet --&gt;



set for the button parent,&lt;br&gt;
where, as you can see, `line-height` matches the element `height`&lt;br&gt;
and will align both texts at the element&#39;s (`p`) center.
Otherwise, the button, being an `inline` element by default, it&#39;s subject to manipulations using the CSS property `vertical-align:` which basically aligns all *inline** elements vertically inside a **block** level element using this typography terms:&lt;br&gt;

    vertical-align: baseline;
    vertical-align: sub;
    vertical-align: super;
    vertical-align: text-top;
    vertical-align: text-bottom;
    vertical-align: middle;
    vertical-align: top;
    vertical-align: bottom;
    vertical-align: 10em;  
    vertical-align: 4px;
    vertical-align: 20%;

*&lt;sub&gt;https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align&lt;/sub&gt;

exactly, you can even manually adjust the alignment using `PX` / `-PX` and `%` 

I&#39;ve encountered some issues using line-height on Android browsers (), so sometimes the right solution was to play with the parent **padding** * and vertical-align rather than the inner children&#39;s alignments (with line-height).

*&lt;sub&gt;(note: **padding** for block elements is more consistent than (top, bottom) used on inner inline elements.)&lt;/sub&gt;



I think what you&#39;re after is `vertical-align: text-bottom;`

http://jsfiddle.net/EQgFF/3/

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    p.box {
        color:#fff;
        background:#444;
        width:400px;
        line-height: 40px;
    }

    span { background: #666; }

    input { vertical-align: text-bottom; border: 1px solid #CCC; height: 24px; }

&lt;!-- language: lang-html --&gt;

    &lt;p class=&quot;box&quot;&gt;&lt;span&gt;some text&lt;/span&gt; &lt;input type=&quot;button&quot; value=&quot;Button&quot;/&gt;&lt;/p&gt;

&lt;!-- end snippet --&gt;



I can&#39;t figure out what the underscore character does in an SQLite `like` statement.
The wildcard character, `%`, is probably the same as in most other SQL databases.

So, what does the `_` character do?

SQLite Like % and _

Python and JavaScript both allow developers to use or to omit semicolons. However, I&#39;ve often seen it suggested (in books and blogs) that I should not use semicolons in Python, while I should always use them in JavaScript.

Is there a technical difference between how the languages use semicolons or is this just a cultural difference?

What is the difference between semicolons in JavaScript and in Python?

I would like to achieve one of the two alignments represented on this image: ![problem representation][1]. CSS3 is ok or even better if it makes things simpler.

My main problem is that I managed to align one div containing the text with the button, but the text itself is aligned with the top of the div and not the bottom.


  [1]: http://i.stack.imgur.com/2tjmz.png

Align text baseline with a button in CSS

<p>I would like to achieve one of the two alignments represented on this image: <img src="http://i.stack.imgur.com/2tjmz.png" alt="problem representation">. CSS3 is ok or even better if it makes things simpler.</p>
<p>My main problem is that I managed to align one div containing the text with the button, but the text itself is aligned with the top of the div and not the bottom.</p>


    &lt;div class=&quot;commentList&quot;&gt;
       &lt;article class=&quot;comment &quot; id=&quot;com21&quot;&gt;&lt;/article&gt;
       &lt;article class=&quot;comment &quot; id=&quot;com20&quot;&gt;&lt;/article&gt;
       &lt;article class=&quot;comment &quot; id=&quot;com19&quot;&gt;&lt;/article&gt;
       &lt;div class=&quot;something&quot;&gt; hello &lt;/div&gt;
    &lt;/div&gt;

I want to select `#com19` ?

    .comment {
        width:470px;
        border-bottom:1px dotted #f0f0f0;
        margin-bottom:10px;
    }
    
    .comment:last-child {
        border-bottom:none;
        margin-bottom:0;
    }

That does not work as long as I do have another `div.something` as actual last child in the commentList. Is it possible to use the last-child selector in this case to select the last appearance of `article.comment`?

[jsFiddle](http://jsfiddle.net/C23g6/2/)




How can I select the last element with a specific class, not last child inside of parent?

I have a `&lt;span&gt;` element which I want to display without any line break. How can I do that?

Prevent line-break of span element

I&#39;m attempting to customize the print CSS, and finding that it prints links out with the `href` value as well as the link.

This is in Chrome.

For this HTML:

&lt;!-- language: lang-html --&gt;

    &lt;a href=&quot;http://www.google.com&quot;&gt;Google&lt;/a&gt;

It prints:

&lt;!-- language: lang-none --&gt;

    Google (http://www.google.com)

And I want it to print:

&lt;!-- language: lang-none --&gt;

    Google

Need to remove href values when printing in Chrome

I am using jQuery and jQuery-ui and want to animate various attributes on various objects. 

For the sake of explaining the issue here I&#39;ve simplified it to one div that changes from blue to red when the user mouses over it.


I am able to get the behavior I want when using `animate()`, however when doing so the styles I am animating have to be in the animation code and so are separate from my style sheet. (see **example 1**)

An alternative is using `addClass()` and `removeClass()` but I have not been able to re-create the exact behavior that I can get with `animate()`. (see **example 2**)

---

### Example 1
Let&#39;s take a look at the code I have with `animate()`:
    
    $(&#39;#someDiv&#39;)
      .mouseover(function(){
        $(this).stop().animate( {backgroundColor:&#39;blue&#39;}, {duration:500});
      })
      .mouseout(function(){
        $(this).stop().animate( {backgroundColor:&#39;red&#39;}, {duration:500});
      });

it displays all the behaviors I am looking for:

 1. Animates smoothly between red and blue.
 2. No animation &#39;overqueue-ing&#39; when the user moves their mouse quickly in and out of the div.
 3. If the user moves their mouse out/in while the animation is still playing it eases correctly between the current &#39;halfway&#39; state and the new &#39;goal&#39; state.

But since the style changes are defined in `animate()` I have to change the style values there, and can&#39;t just have it point to my stylesheet. This &#39;fragmenting&#39; of where styles are defined is something that really bothers me.

---
### Example 2
Here is my current best attempt using `addClass()` and `removeClass` (note that for the animation to work you need jQuery-ui): 

    //assume classes &#39;red&#39; and &#39;blue&#39; are defined

    $(&#39;#someDiv&#39;)
      .addClass(&#39;blue&#39;)
      .mouseover(function(){
        $(this).stop(true,false).removeAttr(&#39;style&#39;).addClass(&#39;red&#39;, {duration:500});
      })
      .mouseout(function(){
        $(this).stop(true,false).removeAttr(&#39;style&#39;).removeClass(&#39;red&#39;, {duration:500});
      });

This exhibits both property 1. and 2. of my original requirements, however 3 does not work.

I understand the reason for this:

When animating `addClass()` and `removeClass()` jQuery adds a temporary style to the element, and then increments the appropriate values until they reach the values of the provided class, and only then does it actually add/remove the class.

Because of this I have to remove the style attribute, otherwise if the animation is stopped halfway the style attribute would remain and would permanently overwrite any class values, since style attributes in a tag have higher importance than class styles.

However when the animation is halfway done it hasn&#39;t yet added the new class, and so with this solution the color jumps to the previous color when the user moves their mouse before the animation is completed.


---

What I want ideally is to be able to do something like this:

    $(&#39;#someDiv&#39;)
      .mouseover(function(){
        $(this).stop().animate( getClassContent(&#39;blue&#39;), {duration:500});
      })
      .mouseout(function(){
        $(this).stop().animate( getClassContent(&#39;red&#39;), {duration:500});
      });

Where `getClassContent` would just return the contents of the provided class. The key point is that this way I don&#39;t have to keep my style definitions all over the place, but can keep them in classes in my stylesheet.

animating addClass/removeClass with jQuery

I have a `table` inside of a `div` with the following style:

    #data {
        overflow-x:hidden;
        overflow-y:visible;
        height:500px;
    }
This displays a vertical scroll bar once enough data is added to the table. However, when new data is added I would like the `div` element to auto-scroll to the bottom.

What JavaScript code could I use to do so? I am open to options in JQuery if necessary but would prefer a JavaScript solution.

How to auto-scroll to end of div when data is added?

I am processing a text file containing coordinates x, y, z

         1      128  1298039
    123388        0        2
    ....

every line is delimited into 3 items using

    words = line.split()

After processing data I need to write coordinates back in another txt file so as items in each column are aligned right (as well as the input file). Every line is composed of the coordinates

    line_new = words[0]  + &#39;  &#39; + words[1]  + &#39;  &#39; words[2].

Is there any manipulator like `std::setw()` etc. in C++ allowing to set the width and alignment?



Format output string, right alignment

Consider the following example: ([live demo][1])

HTML:

    &lt;div&gt;div&lt;/div&gt;
    &lt;iframe&gt;&lt;/iframe&gt;

CSS:

    div, iframe {
        width: 100px;
        height: 50px;
        margin: 0 auto;
        background-color: #777;
    }

Result:

![enter image description here][2]

Why the `iframe` is not centrally aligned like the `div`? How could I centrally align it?


  [1]: http://jsfiddle.net/wYNSu/
  [2]: http://i.stack.imgur.com/d82gb.png

How to center an iframe horizontally?

I have a `TextView` in my application. I want to align the text in it to the right. I tried adding:

    android:gravity=&quot;right&quot;

But this doesn&#39;t work for me.

What might I be doing wrong?

Right align text in android TextView

I have very basic and known scenario of form where I need to align labels next to inputs correctly. However I don&#39;t know how to do it.

My goal would be that labels are aligned next to inputs to the right side. Here is picture example of desired result.

![enter image description here][1]


  [1]: http://i.stack.imgur.com/0vfJu.png

I have made a fiddle for your convenience and to clarify what I have now - http://jsfiddle.net/WX58z/

Snippet:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;block&quot;&gt;
        &lt;label&gt;Simple label&lt;/label&gt;
        &lt;input type=&quot;text&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;block&quot;&gt;
        &lt;label&gt;Label with more text&lt;/label&gt;
        &lt;input type=&quot;text&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;block&quot;&gt;
        &lt;label&gt;Short&lt;/label&gt;
        &lt;input type=&quot;text&quot; /&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



Align labels in form next to input

I am trying to add spacing to align text in between two strings vars without using `&quot;        &quot;` to do so

Trying to get the text to look like this, with the second column being aligned.
```none
Location: 10-10-10-10       Revision: 1
District: Tower             Date: May 16, 2012
User: LOD                   Time: 10:15
```


Currently have it coded like this, just using spaces...

    &quot;Location: &quot; + Location + &quot;               Revision: &quot; + Revision + &#39;\n&#39;


I tried working with `string.rjust` &amp; `srting.ljust` but to no avail.

Suggestions?

Content Type	Original Author	Original Content on Stackoverflow
Question	Paul Brauner	View Question on Stackoverflow
Solution 1 - Css	Roko C. Buljan	View Answer on Stackoverflow
Solution 2 - Css	Chris	View Answer on Stackoverflow

Align text baseline with a button in CSS

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

What is the difference between semicolons in JavaScript and in Python?

SQLite Like % and _

Attributions