    div { margin: auto; }

This will center your div.

Div by itself is a blockelement. Therefor you need to define the style to the div how to behave.

I cannot help you much without a small (possibly reduced) snippit of the problem. If the problem is what I think it is then it&#39;s because a **div** by default takes up **100% width**, and as such cannot be aligned.

What you may be after is to align the inline elements inside the div (such as text) with **text-align:center;** otherwise you may consider setting the div to **display:inline-block;**

If you do go down the inline-block route then you may have to consider my favorite IE hack.

    width:100px;
    display:inline-block;
    zoom:1; //IE only
    *display:inline; //IE only
    
Happy Coding :)

I am a Scala programmer, learning Haskell now. It&#39;s easy to find practical use cases and real world examples for OO concepts, such as decorators, strategy pattern etc. Books and interwebs are filled with it. 
 
I came to the realization that this somehow is not the case for functional concepts. Case in point: __applicatives__.  

I am struggling to find practical use cases for applicatives. Almost all of the tutorials and books I have come across so far provide the examples of `[]` and `Maybe`. I expected applicatives to be more applicable than that, seeing all the attention they get in the FP community.  

I think I understand the conceptual basis for _applicatives_ (maybe I am wrong), and I have waited long for my moment of enlightenment. But it doesn&#39;t seem to be happening. Never while programming, have I had a moment when I would shout with a joy, &quot;Eureka! I can use applicative here!&quot; (except again, for `[]` and `Maybe`).  

Can someone please guide me how applicatives can be used in a day-to-day programming? How do I start spotting the pattern? Thanks!

What are practical uses of applicative style?

I accidentally press a shorcut key, and I know that vim has done something but I don&#39;t know what.

How can I find out what that shortcut key does?


In Vim, how to find out what a key combination does

It is working with this way

    &lt;td align=&quot;center&quot;&gt;

But I want to use CSS class.

I defined class like this way but no luck


    td
    {
        vertical-align: middle;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        align: center;
    }


Vertical align is working and text align is working for text. But it does not align div inside td with this way. I want to align div inside td.

How to align a div inside td element using CSS class

It is working with this way
<pre><code class="hljs language-ini">&#x3C;td align="center">
</code></pre>
But I want to use CSS class.
I defined class like this way but no luck
<pre><code class="hljs language-css">td
{
 vertical-align: middle;
 text-align: center;
 margin-left: auto;
 margin-right: auto;
 align: center;
}
</code></pre>
Vertical align is working and text align is working for text. But it does not align div inside td with this way. I want to align div inside td.

I have two (or more) links. For example: http://google.com and http://yahoo.com.

How can I make them _both_ open when I click on a single link?

For example, a link entitled &quot;click here&quot; which, when clicked, will open two different blank windows.

How to make a link open multiple pages when clicked

I have a list:

    &lt;ul&gt;
        &lt;li&gt;milk&lt;/li&gt;
        &lt;li&gt;butter&lt;/li&gt;
        &lt;li&gt;eggs&lt;/li&gt;
        &lt;li&gt;orange juice&lt;/li&gt;
        &lt;li&gt;bananas&lt;/li&gt;
    &lt;/ul&gt;

Using javascript how can I reorder the list items randomly?

javascript - shuffle HTML list element order

Here&#39;s the dilema, I have a webpage (only for android devices) and in that page I have an input box (a text box specifically) and when it gets focus the browser zooms in. I don&#39;t want it to zoom in - sounds easy, right?

Here&#39;s where it gets fun: I have to be able to zoom in general so don&#39;t say 

    &lt;meta name=&#39;viewport&#39; content=&#39;user-scalable=0&#39;&gt;
That won&#39;t work for me.

Also, the input box doesn&#39;t receive click events. It appears when another button is clicked a gets focus programmatically.

Here&#39;s what I&#39;ve tried and they&#39;ve failed so far:

    jQuery(&#39;head meta[name=viewport]&#39;).remove();
    jQuery(&#39;head&#39;).prepend(&#39;&lt;meta name=&quot;viewport&quot; content=&quot;width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no&quot; /&gt;&#39;);
    jQuery(&quot;#locationLock input&quot;).focus();
    jQuery(&#39;head meta[name=viewport]&#39;).remove();
    jQuery(&#39;head&#39;).prepend(&#39;&lt;meta name=&quot;viewport&quot; content=&quot;width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes&quot; /&gt;&#39;);

This also failed:

    &lt;input type=&#39;text&#39; onfocus=&quot;return false&quot;&gt;

And this:

    jQuery(&quot;#locationLock input&quot;).focus(function(e){e.preventDefault();});

Any ideas?

Disable zoom on input focus in Android webpage

I usually use this: `&lt;html lang=&quot;en&quot;&gt;`.

However, I am working on a website that will use two languages and mix them up sometimes in the same sentence or heading.

How would the above code look in this case? Can I use `&lt;html lang=&quot;lang1 lang2&quot;&gt;`?

What &lt;html lang=&quot;&quot;&gt; attribute value should I use for a mixed language page?

This is driving me nuts:

**HTML:**

    &lt;div&gt;&lt;h1&gt;Hello World!&lt;/h1&gt;&lt;/div&gt;

**CSS:**

&lt;!-- language: lang-css --&gt;

    *:not(div) h1 { color: #900; }

Doesn&#39;t this read, &quot;Select all `h1` elements that have an ancestor that is not a `div` element...?&quot; Thus, &quot;Hello World!&quot; should not be coloured red, yet it still is.

For the above markup, adding the child combinator works:

&lt;!-- language: lang-css --&gt;

    *:not(div) &gt; h1 { color: #900; }

But doesn&#39;t affect the `h1` element if it is not a child of a `div` element. For example:

    &lt;div&gt;&lt;article&gt;&lt;h1&gt;Hello World!&lt;/h1&gt;&lt;/article&gt;&lt;/div&gt;

Which is why I&#39;d like to indicate the `h1` element as a descendant, not a child, of the `div` element. Anyone?

CSS negation pseudo-class :not() for parent/ancestor elements

I know it sounds easy.  I need to put a text in center, but when the text is too long it needs to go below, but still align in the center of my xml.

Here&#39;s my code :

     &lt;LinearLayout
  		android:layout_width=&quot;wrap_content&quot;
  		android:layout_height=&quot;wrap_content&quot;
  		android:id=&quot;@+id/showdescriptioncontenttitle&quot;
  		android:paddingTop=&quot;10dp&quot;
  		android:paddingBottom=&quot;10dp&quot;
  		android:layout_centerHorizontal=&quot;true&quot;
  	&gt;
  		&lt;TextView 
  			android:id=&quot;@+id/showdescriptiontitle&quot;
  			android:text=&quot;Title&quot;
  			android:textSize=&quot;35dp&quot;
  			android:layout_width=&quot;wrap_content&quot;
  			android:layout_height=&quot;wrap_content&quot;
  		/&gt;
  	&lt;/LinearLayout&gt;

I put paddingTop and Bottom because I need some space.
PS: My code is bigger; it&#39;s in a RelativeLayout.

align text center with android

Sorry for the huge code dump, but I&#39;m truly lost.

**MyActivity.java onCreate**:

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_singlepane_empty);
    mFragment = new PlacesFragment();
    getSupportFragmentManager().beginTransaction()
                        .add(R.id.root_container, mFragment)
                        .commit();
**PlacesFragment.java onCreateView**:

    mRootView = (ViewGroup) inflater.inflate(R.layout.list_content, null);
    return mRootView;

**Notes**: `mRootView` is a `ViewGroup` global, no problem about it, I believe. `PlacesFragment` is a `ListFragment`.

Layouts:

**activity_singlepane_empty.xml**:

    &lt;LinearLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
        android:id=&quot;@+id/root_container&quot;
        android:orientation=&quot;vertical&quot;
        android:layout_width=&quot;match_parent&quot;
        android:layout_height=&quot;match_parent&quot;
        android:background=&quot;#00f&quot;&gt;
        &lt;include layout=&quot;@layout/actionbar&quot;/&gt;
    
        &lt;!-- FRAGMENTS COME HERE! See match_parent above --&gt;

    &lt;/LinearLayout&gt;

**list_content.xml**:

    &lt;FrameLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
            android:layout_width=&quot;match_parent&quot;
            android:layout_height=&quot;match_parent&quot;
            android:id=&quot;@+id/listContainer&quot;
            android:background=&quot;#990&quot;
            &gt;
        
            &lt;ListView android:id=&quot;@android:id/list&quot;
                    android:layout_width=&quot;match_parent&quot; 
                    android:layout_height=&quot;match_parent&quot;
                    android:drawSelectorOnTop=&quot;false&quot; /&gt;
            
            &lt;TextView android:id=&quot;@id/android:empty&quot;
                    android:layout_width=&quot;wrap_content&quot;
                    android:layout_height=&quot;wrap_content&quot;
                    android:layout_gravity=&quot;center&quot;
                    android:gravity=&quot;center&quot;
                    android:textAppearance=&quot;?android:attr/textAppearanceMedium&quot; 
                    android:text=&quot;@string/no_data_suggest_connection&quot;/&gt;
    
    &lt;/FrameLayout&gt;

**Problem:** as you can see, the expected behavior would be to have the empty `TextView` above to appear centered on the screen. On the design preview in Eclipse, it is OK. Only when added to `root_view` as a fragment the `FrameLayout` won&#39;t fill the whole screen.

`root_container` is blue, and `FrameLayout` is yellowish, see below for debug purposes. ***Shouldn&#39;t the yellow pane fill the whole screen?!?!?!?***

![enter image description here][1]


  [1]: http://i.stack.imgur.com/W14iF.png

Android Fragment does not respect match_parent as height

I am using the following code. How to put this table in the center of the page using CSS?

```html
&lt;html&gt;
    &lt;head&gt;
        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;styles.css&quot; /&gt;
        &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
        &lt;title&gt;The Main Page&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;td&gt;&lt;button class=&quot;lightSquare&quot;&gt;&lt;/button&gt;&lt;/td&gt;
                &lt;td&gt;&lt;button class=&quot;darkSquare&quot;&gt;&lt;/button&gt;&lt;/td&gt;
                &lt;td&gt;&lt;button class=&quot;lightSquare&quot;&gt;&lt;/button&gt;&lt;/td&gt;
                &lt;td&gt;&lt;button class=&quot;darkSquare&quot;&gt;&lt;/button&gt;&lt;/td&gt;
                &lt;td&gt;&lt;button class=&quot;lightSquare&quot;&gt;&lt;/button&gt;&lt;/td&gt;
                &lt;td&gt;&lt;button class=&quot;darkSquare&quot;&gt;&lt;/button&gt;&lt;/td&gt;
                &lt;td&gt;&lt;button class=&quot;lightSquare&quot;&gt;&lt;/button&gt;&lt;/td&gt;
                &lt;td&gt;&lt;button class=&quot;darkSquare&quot;&gt;&lt;/button&gt;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/body&gt;
&lt;/html&gt;
```

How to put table in the center of the page using CSS?

I have the code below and I&#39;d like to center the &quot;well&quot; elements of the outer &quot;row&quot; div.  I&#39;ve tried various approaches such as text-align: center (which just centers the text and not the inner DIV elements.  

Here is a [jsfiddle][1].  The idea is that I get a page of &quot;well&quot; tiles and that after 4 or so it wraps.  But if it is less than 4, they should appear centered on the page.

    &lt;body class=&quot;container-fluid&quot;&gt;
    	&lt;div class=&quot;row&quot;&gt;
    		&lt;div class=&quot;well span2&quot;&gt;
    	        &lt;div class=&quot;row&quot;&gt;
    	            &lt;div class=&quot;span2&quot;&gt;
    	                Header
    	            &lt;/div&gt;
    	        &lt;/div&gt;
    	        &lt;div class=&quot;row&quot;&gt;
    	            &lt;div class=&quot;span2&quot;&gt;
    	                Sub Header
    	            &lt;/div&gt;
    	        &lt;/div&gt;
    
    	    &lt;/div&gt;
    
    	    &lt;div class=&quot;well span2&quot;&gt;
    	        &lt;div class=&quot;row&quot;&gt;
    	            &lt;div class=&quot;span2&quot;&gt;
    	                Header
    	            &lt;/div&gt;
    	        &lt;/div&gt;
    	        &lt;div class=&quot;row&quot;&gt;
    	            &lt;div class=&quot;span2&quot;&gt;
    	                Sub Header
    	            &lt;/div&gt;
    			&lt;/div&gt;
    		&lt;/div&gt;
    	&lt;/div&gt;
    &lt;/body&gt;


  [1]: http://jsfiddle.net/LBtpe/

Center Contents of Bootstrap row container

Is there a way to **CENTER A DIV vertically and horizontally** but, and that is important, that **the content will not be cut when the window is smaller than the content**  **The div must have a background color and a width and hight.** 

I have always centered divs with the absolute positioning and negative margins like in the example provided. But it has the problem that it cuts the content on top. Is there a method to center the div .content without this problem?

I have the example here to play: http://jsbin.com/iquviq/1/edit

CSS:

    body { margin: 0px; }
    
    .background {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    	background-color: yellow;
    }

    /* 
    is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?: 
    */ 

 
    .content {
        width: 200px;
        height: 600px;
        background-color: blue;
    	
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-100px;/* half width*/
        margin-top:-300px;/* half height*/
    }

HTML:

    &lt;div class=&quot;background&quot;&gt;
        &lt;div class=&quot;content&quot;&gt; some text &lt;/div&gt;
    &lt;/div&gt;

My question is not duplicate of &quot;How to center an element horizontally and vertically? &quot; 1- My question was asked before. (just check dates). 2- My question ask very clearly and in black as condition: &quot;the content will not be cut when the window is smaller than the content&quot;

Center a DIV horizontally and vertically

The look of a WPF CheckBox misaligns the check portion with the label (content) portion. The check stays slightly above the content as shown here:

![enter image description here][1]

The XAML looks like this:

    &lt;CheckBox Content=&quot;Poorly aligned CheckBox&quot; Margin=&quot;9&quot;/&gt;

The CheckBox is inside a Grid cell. **Is there a simple way to make the content and check portions of a XAML CheckBox align vertically?** I&#39;ve tried various combinations of properties with no luck. I saw [a similar question here][2] but the answer is way too complex.

Thanks in advance.

**EDIT: The problem was caused by the Window FontSize which I set to 14**. To re-create the problem set the CheckBox FontSize to 14 (or more). My program is viewed at a distance by factory workers so I allow the Window FontSize to be increased or decreased by the user.


  [1]: http://i.stack.imgur.com/cTT3O.png
  [2]: https://stackoverflow.com/questions/6077510/how-can-i-center-a-wpf-checkbox-inside-its-clickable-region

How can I align a CheckBox with its content?

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

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

How can I delete all rows of an HTML table except the `&lt;th&gt;`&#39;s using Javascript, and without looping through all the rows in the table? I have a very huge table and I don&#39;t want to freeze the UI while I&#39;m looping through the rows to delete them

Delete all rows in an HTML table

Here&#39;s my problem: I have an HTML table that looks like this:

![HTML Table][1]

What I want is for there to be an additional table row underneath it, except this row spans the full width of the table - but with *just one cell*. I quickly mocked up an example:

![table][2]

As you can see I added another Table Row below it with a single `&lt;td&gt;` cell inside containing the text. However I want this cell to span 100% of the width of the entire table - it shouldn&#39;t resize the width of the &#39;Name&#39; column.

Is such a thing possible? I am happy to use jQuery or Javascript if needs be - also, this doesn&#39;t need to work in IE as every user is using Chrome (although that would be a perk).




  [1]: http://i.stack.imgur.com/5H4T3.png
  [2]: http://i.stack.imgur.com/3PQ30.png

HTML Table Rows - How to make a unique cell have 100% width? (with screenshot explanation)

I have a table with 100% width. If I put `&lt;td&gt;`s in it, they get spread out with equal length columns. However, I want all the columns except last to have as small a width as possible, without wrapping text.

What I did first was that I set `width=&quot;1px&quot;` in all `&lt;td&gt;`s except last (although deprecated, but the `style=&quot;width:1px&quot;` didn&#39;t have any effect), which worked fine until I had multi-word data in the column. In that case, to keep the length as small as possible, it wrapped my text.

Let me demonstrate. Imagine this table:

    ---------------------------------------------------------------------------------
    element1 | data      | junk here   | last column
    ---------------------------------------------------------------------------------
    elem     | more data | other stuff | again, last column
    ---------------------------------------------------------------------------------
    more     | of        | these       | rows
    ---------------------------------------------------------------------------------

No matter what I try, what I keep getting is either this:

    ---------------------------------------------------------------------------------
    element1         | data             | junk here        | last column
    ---------------------------------------------------------------------------------
    elem             | more data        | other stuff      | again, last column
    ---------------------------------------------------------------------------------
    more             | of               | these            | rows
    ---------------------------------------------------------------------------------

or (even though I set `style=&quot;whitespace-wrap:nowrap&quot;`) this:

    ---------------------------------------------------------------------------------
             |      | junk  | last
    element1 | data |       | 
             |      | here  | column
    ---------------------------------------------------------------------------------
             | more | other | again,
    elem     |      |       | last
             | data | stuff | column
    ---------------------------------------------------------------------------------
    more     | of   | these | rows
    ---------------------------------------------------------------------------------

I want to get the table I presented first. How do I achieve this? (I&#39;d rather stick to standard and using CSS. I honestly don&#39;t care if IE hasn&#39;t implemented part of the standard either)

More explanation: What I need is to keep the columns as short as possible without wrapping words (last column should be as large as it needs to make the table width actually reach 100%). If you know LaTeX, what I want is how tables naturally appear in LaTeX when you set their width to 100%.

Note: I found [this](https://stackoverflow.com/questions/1060933/how-to-make-last-cell-of-a-row-in-a-table-occupy-all-remaining-width) but it still gives me the same as last table.

How do I set the table cell widths to minimum except last column?

I am writing a page where I need an html table to maintain a set size. I need the headers at the top of the table to stay there at all times but I also need the body of the table to scroll no matter how many rows are added to the table. 

I want it to look like method 2 in this url: [http://www.cssplay.co.uk/menu/tablescroll.html][1]


  [1]: http://www.cssplay.co.uk/menu/tablescroll.html

I have tried doing this but no scrollbar appears:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    tbody {
      height: 80em;
      overflow: scroll;
    }

&lt;!-- language: lang-html --&gt;

    &lt;table border=1 id=&quot;qandatbl&quot; align=&quot;center&quot;&gt;
      &lt;tr&gt;
        &lt;th class=&quot;col1&quot;&gt;Question No&lt;/th&gt;
        &lt;th class=&quot;col2&quot;&gt;Option Type&lt;/th&gt;
        &lt;th class=&quot;col1&quot;&gt;Duration&lt;/th&gt;
      &lt;/tr&gt;

      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td class=&#39;qid&#39;&gt;&lt;/td&gt;
          &lt;td class=&quot;options&quot;&gt;&lt;/td&gt;
          &lt;td class=&quot;duration&quot;&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;

&lt;!-- end snippet --&gt;

How to display scroll bar onto a html table

    &lt;table&gt;
    &lt;tr&gt;
    &lt;td&gt;Test&lt;/td&gt;
    &lt;td&gt;A long string blah blah blah&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
    
    &lt;style&gt;
    td{max-width:67%;}
    &lt;/style&gt;


The above does not work. How can I set the max-width of a table cell using percentages?

Content Type	Original Author	Original Content on Stackoverflow
Question	MonsterMMORPG	View Question on Stackoverflow
Solution 1 - Html	Luuk	View Answer on Stackoverflow
Solution 2 - Html	martin	View Answer on Stackoverflow

How to align a div inside td element using CSS class

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

In Vim, how to find out what a key combination does

What are practical uses of applicative style?

Attributions