How can I horizontally center a `&lt;div&gt;` within another `&lt;div&gt;` using CSS?

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;outer&quot;&gt;
      &lt;div id=&quot;inner&quot;&gt;Foo foo&lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


How to horizontally center an element

I want to center a `div` vertically with CSS. I don&#39;t want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.

    &lt;body&gt;
        &lt;div&gt;Div to be aligned vertically&lt;/div&gt;
    &lt;/body&gt;

How can I center a `div` vertically in all major browsers, including Internet Explorer 6?


How can I vertically center a div element for all browsers using CSS?

How do I center a div of one column size within the container (12 columns) in [Twitter Bootstrap&amp;nbsp;3][1]?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .centered {
      background-color: red;
    }

&lt;!-- language: lang-html --&gt;

    &lt;!-- Latest compiled and minified CSS --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; integrity=&quot;sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u&quot; crossorigin=&quot;anonymous&quot;&gt;

    &lt;body class=&quot;container&quot;&gt;
      &lt;div class=&quot;col-lg-1 col-offset-6 centered&quot;&gt;
        &lt;img data-src=&quot;holder.js/100x100&quot; alt=&quot;&quot; /&gt;
      &lt;/div&gt;
    &lt;/body&gt;

&lt;!-- end snippet --&gt;

I want a `div`, with a class `.centered` to be centered within the container. I may use a row if there are multiple `div`s, but for now I just want a `div` with the size of one column centered within the container (12 columns).

I am also not sure the above approach is good enough as the intention is not to offset the `div` by half. I do not need free spaces outside the `div` and the contents of the `div` shrink in proportion. I want to **empty space outside the div to be evenly distributed** (shrink till the container width is equal to one column).

  [1]: https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29
  [2]: http://jsfiddle.net/qejjP/2/



Center a column using Twitter Bootstrap 3

I&#39;m having a problem centering an element that has the attribute `position` set to `absolute`.
Does anyone know why the images are not centered?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      text-align: center;
    }

    #slideshowWrapper {
      margin-top: 50px;
      text-align: center;
    }

    ul#slideshow {
      list-style: none;
      position: relative;
      margin: auto;
    }

    ul#slideshow li {
      position: absolute;
    }

    ul#slideshow li img {
      border: 1px solid #ccc;
      padding: 4px;
      height: 450px;
    }

&lt;!-- language: lang-html --&gt;

    &lt;body&gt;
      &lt;div id=&quot;slideshowWrapper&quot;&gt;
        &lt;ul id=&quot;slideshow&quot;&gt;
          &lt;li&gt;&lt;img src=&quot;https://source.unsplash.com/random/300*300?technology&quot; alt=&quot;Dummy 1&quot; /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src=&quot;https://source.unsplash.com/random/301*301?technology&quot; alt=&quot;Dummy 2&quot; /&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/body&gt;
&lt;!-- end snippet --&gt;



How to center a &quot;position: absolute&quot; element

Best way to center a `&lt;div&gt;` element on a page both vertically and horizontally?

I know that `margin-left: auto; margin-right: auto;` will center on the horizontal, but what is the best way to do it vertically, too?

Best way to center a &lt;div&gt; on a page vertically and horizontally?

I would like to make a `position: fixed;` popup box centered to the screen with a dynamic width and height. I used `margin: 5% auto;` for this. Without `position: fixed;` it centers fine horizontally, but not vertically. After adding `position: fixed;`, it&#39;s even not centering horizontally.

Here&#39;s the complete set:

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    .jqbox_innerhtml {
        position: fixed;
        width: 500px;
        height: 200px;
        margin: 5% auto;
        padding: 10px;
        border: 5px solid #ccc;
        background-color: #fff;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;jqbox_innerhtml&quot;&gt;
        This should be inside a horizontally
        and vertically centered box.
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

How do I center this box in screen with CSS?

Center a position:fixed element

I am trying to center my tabs content vertically, but when I add the CSS style `display:inline-flex`, the horizontal text-align disappears.

How can I make both text alignments x and y for each of my tabs?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    * { box-sizing: border-box; }
    #leftFrame {
      background-color: green;
      position: absolute;
      left: 0;
      right: 60%;
      top: 0;
      bottom: 0;
    }
    #leftFrame #tabs {
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 25%;
    }
    #leftFrame #tabs div {
      border: 2px solid black;
      position: static;
      float: left;
      width: 50%;
      height: 100%;
      text-align: center;
      display: inline-flex;
      align-items: center;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=leftFrame&gt;
      &lt;div id=tabs&gt;
        &lt;div&gt;first&lt;/div&gt;
        &lt;div&gt;second&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



How to center an element horizontally and vertically

I&#39;m trying to create a simple page with CSS Grid.

What I&#39;m failing to do is center the text from the HTML to the respective grid cells.

I&#39;ve tried placing content in separate `div`s both inside and outside of the `left_bg` and `right_bg` selectors and playing with some of the CSS properties to no avail.

How do I do this?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    html,
    body {
      margin: 0;
      padding: 0;
    }

    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 100vh;
      grid-gap: 0px 0px;
    }

    .left_bg {
      display: subgrid;
      background-color: #3498db;
      grid-column: 1 / 1;
      grid-row: 1 / 1;
      z-index: 0;
    }

    .right_bg {
      display: subgrid;
      background-color: #ecf0f1;
      grid-column: 2 / 2;
      grid_row: 1 / 1;
      z-index: 0;
    }

    .left_text {
      grid-column: 1 / 1;
      grid-row: 1 / 1;
      position: relative;
      z-index: 1;
      justify-self: center;
      font-family: Raleway;
      font-size: large;
    }

    .right_text {
      grid-column: 2 / 2;
      grid_row: 1 / 1;
      position: relative;
      z-index: 1;
      justify-self: center;
      font-family: Raleway;
      font-size: large;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;container&quot;&gt;
      &lt;!--everything on the page--&gt;

      &lt;div class=&quot;left_bg&quot;&gt;
        &lt;!--left background color of the page--&gt;
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;right_bg&quot;&gt;
      &lt;!--right background color of the page--&gt;
    &lt;/div&gt;

    &lt;div class=&quot;left_text&quot;&gt;
      &lt;!--left side text content--&gt;
      &lt;p&gt;Review my stuff&lt;/p&gt;

      &lt;div class=&quot;right_text&quot;&gt;
        &lt;!--right side text content--&gt;
        &lt;p&gt;Hire me!&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



Centering in CSS Grid

[![enter image description here][1]][1]

Imagine the following layout, where the dots represent the space between the boxes:

    [Left box]......[Center box]......[Right box]

When I remove the right box, I like the center box to still be in the center, like so:

    [Left box]......[Center box].................

The same goes for if I would remove the left box.

    ................[Center box].................

Now when the content within the center box gets longer, it will take up as much available space as needed while remaining centered. The left and right box will never shrink and thus when where is no space left the `overflow:hidden` and `text-overflow: ellipsis` will come in effect to break the content;

    [Left box][Center boxxxxxxxxxxxxx][Right box]

All the above is my ideal situation, but I have no idea how to accomplish this effect. Because when I create a flex structure like so:

    .parent {
        display : flex; // flex box
        justify-content : space-between; // horizontal alignment
        align-content   : center; // vertical alignment
    }

If the left and right box would be exactly the same size, I get the desired effect. However when one of the two is from a different size the centered box is not truly centered anymore.

Is there anyone that can help me?

**Update**

A `justify-self` would be nice, this would be ideal:

    .leftBox {
         justify-self : flex-start;
    }
    
    .rightBox {
        justify-self : flex-end;
    }


  [1]: http://i.stack.imgur.com/WnUks.gif

Keep the middle item centered when side items have different widths

I have a div that&#39;s width is 100%.

I&#39;d like to center a button within it, how might I do this?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;div style=&quot;width:100%; height:100%; border: 1px solid&quot;&gt;
      &lt;button type=&quot;button&quot;&gt;hello&lt;/button&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



How to center a button within a div?

I have a page where only form exists and I want form to be placed in the center of the screen.

    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row justify-content-center align-items-center&quot;&gt;
        &lt;form&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;formGroupExampleInput&quot;&gt;Example label&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;formGroupExampleInput&quot; placeholder=&quot;Example input&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;form-group&quot;&gt;
            &lt;label for=&quot;formGroupExampleInput2&quot;&gt;Another label&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;formGroupExampleInput2&quot; placeholder=&quot;Another input&quot;&gt;
          &lt;/div&gt;
        &lt;/form&gt;   
      &lt;/div&gt;  
    &lt;/div&gt;

The `justify-content-center` aligns the form horizontally, but I can&#39;t figure out how to align it vertically. I have tried to use `align-items-center` and `align-self-center`, but it doesn&#39;t work. 

What am I missing?

[DEMO][1]


  [1]: http://jsbin.com/xotonekita/edit?html,css,output

Bootstrap Center Vertical and Horizontal Alignment

    #menu {
        position: fixed;
        width: 800px;
        background: rgb(255, 255, 255); /* The Fallback */
        background: rgba(255, 255, 255, 0.8);
        margin-top: 30px;
    }

I know this question is a million times out there, however I can&#39;t find a solution to my case.
I&#39;ve got a div, which should be fixed on the screen, even if the page is scrolled it should always stay CENTERED in the middle of the screen!

The div should have `500px` width, should be `30px` away from the top (margin-top), should be horizontally centered in the middle of the page for all browser sizes and should not move when scrolling the rest of the page.

Is that possible?

CSS horizontal centering of a fixed div?

I&#39;m trying to make a small username and password input box.

I would like to ask, how do you vertically align a div?

What I have is:

    &lt;div id=&quot;Login&quot; class=&quot;BlackStrip floatright&quot;&gt;
       &lt;div id=&quot;Username&quot; class=&quot;floatleft&quot;&gt;Username&lt;br&gt;Password&lt;/div&gt;
       &lt;div id=&quot;Form&quot; class=&quot;floatleft&quot;&gt;
       &lt;form action=&quot;&quot; method=&quot;post&quot;&gt;
          &lt;input type=&quot;text&quot; border=&quot;0&quot;&gt;&lt;br&gt;
          &lt;input type=&quot;password&quot; border=&quot;0&quot;&gt;
       &lt;/form&gt;
       &lt;/div&gt;
    &lt;/div&gt;

How can I make the div with id Username and Form to vertically align itself to the center? I&#39;ve tried to put:

    vertical-align: middle;

in CSS for the div with id Login, but it doesn&#39;t seem to work. Any help would be appreciated.

How to vertically center &lt;div&gt; inside the parent element with CSS?

We can set a image as background image of a `&lt;div&gt;` like:

    &lt;style&gt;
        #test { 
           
            background-image: url(./images/grad.gif); 
            background-repeat: no-repeat;
            background-position: center center; 

            width:80%; 
            margin-left:10%; 
            height:200px; 
            background-color:blue;
            
        }

    &lt;/style&gt;

    &lt;div id=&quot;test&quot;&gt;&lt;/div&gt;

I need to set a table at the center of a `&lt;div&gt;` horizontally &amp; vertically. Is there a cross-browser solution using `CSS`?

How to position a table at the center of div horizontally &amp; vertically

In `WinForms` I am using a `Label` to display different messages like success, failure, etc.

I&#39;d like to center that label in the center form. I want a solution that will keep it centered whether there&#39;s just one word or a whole sentence in the label.


How do I keep a label centered in WinForms?

So I know we can center a div horizontally if we use `margin:0 auto;`. Should `margin:auto auto;` work how I think it should work? Centering it vertically as well? 

Why doesn&#39;t `vertical-align:middle;` work either?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    .black {
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background:rgba(0,0,0,.5);
    }
    .message {
        background:yellow;
        width:200px;
        margin:auto auto;
        padding:10px;
    }


&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;black&quot;&gt;
        &lt;div class=&quot;message&quot;&gt;
            This is a popup message.
        &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;

[JSFiddle](http://jsfiddle.net/yWnZ2/)

Using margin:auto to vertically-align a div

I have in my page a button which when clicked displays a `div` (popup style) in the middle of my screen.

I am using the following CSS to center the `div` in the middle of the screen:

    .PopupPanel
    {
    	border: solid 1px black;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	background-color: white;
    	z-index: 100;
    
    	height: 400px;
    	margin-top: -200px;
    
    	width: 600px;
    	margin-left: -300px;
    }

This CSS works fine as long as the page is not scrolled down.

But, if I place the button at the bottom of my page, when it is clicked, the `div` is displayed at the top, and the user has to scroll up to view the contents of the `div`.

I would like to know how to display the `div` in the middle of the screen, even when the page has been scrolled.

Center a &#39;div&#39; in the middle of the screen, even when the page is scrolled up or down?

In [this example][1] the image is not centered. Why? My browser is Google Chrome v10 on windows 7, not IE.

    &lt;img src=&quot;/img/logo.png&quot; style=&quot;margin:0px auto;&quot;/&gt;


  [1]: http://jsfiddle.net/XnKDQ/

Auto margins don&#39;t center image in page

I have tried everything but cannot seem to center this text. Can someone please tell me where the error is.

    NSMutableParagraphStyle *paragraphStyle = NSMutableParagraphStyle.new;
    paragraphStyle.alignment = NSTextAlignmentCenter;
    label.attributedText = [[NSAttributedString alloc] initWithString:cell.EventTitle.text attributes:@{NSForegroundColorAttributeName : [UIColor whiteColor],NSParagraphStyleAttributeName:paragraphStyle,NSBaselineOffsetAttributeName : @0,NSFontAttributeName : [UIFont fontWithName:@&quot;BrandonGrotesque-Black&quot; size:34]}];

Attributed Text Center Alignment

I&#39;m trying to bottom-center a widget at the bottom of a Column, but it keeps aligning to the left.

    return new Column(
      new Stack(
        new Positioned(
          bottom: 0.0, 
          new Center(
            new Container(),
          ),
        ),
      ),
    ); 

The existence of the Positioned forces the Container to the left, instead of centering. Removing the Positioned, however, puts the Container in the middle-center.

Flutter: Trying to bottom-center an item in a Column, but it keeps left-aligning

I have the following HTML:
&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;outer&quot;&gt;
        &lt;div class=&quot;inner rotate&quot;&gt;Centered?&lt;/div&gt;
    &lt;/div&gt;

```div.outer``` is a narrow vertical strip. ```div.inner``` is rotated 90 degrees. I would like the text &quot;Centered?&quot; to appear centered in its container div. I do not know the size of either div in advance.

This comes close: http://jsfiddle.net/CCMyf/2/. You can see from the jsfiddle that the text is vertically centered before the ```transform: rotate(-90deg)``` style is applied, but is somewhat offset after. This is particularly noticeable when ```div.outer``` is short.

Is it possible to center this text vertically without knowing any of the sizes in advance? I haven&#39;t found any values of ```transform-origin``` that solve this problem.

Vertically center rotated text with CSS

I need to add to add ListView with complicated items background: different for even/odd and rounded corners at the top and bottom. It looks like this:

![ListView top][1]

I have implemented all this stuff via level-list, but there is one more thing I want to do.
Now the bottom item is near the bottom of the screen. It is better to add some space. 

![ListView bottom looks not good][2]


I don&#39;t want to add bottom margin to ListView, I need margin only for last item.

The ways I see to do this:

Footer
------

A kind of hack – add footer with empty TextView to ListView. But footers are quite unstable things, they usually disappear after notifyDataSetChanged and there is no way to get them back

Image with transparent pixels
-----------------------------

I asked designer to add transparent pixels to bottom background resource. Unfortunately, in this case vertical centering is completely broken.
For example, there is 9patch like this:

![9patch][3]

And layout like this:

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
    
    &lt;RelativeLayout 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;
            &gt;
        &lt;!-- View with background with transparent pixels on bottom --&gt;
        &lt;LinearLayout android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;wrap_content&quot;
                      android:id=&quot;@+id/item&quot;
                      android:background=&quot;@drawable/some_bgr&quot;
                      android:padding=&quot;10dp&quot;
                &gt;
            &lt;TextView android:layout_width=&quot;0dp&quot; android:layout_height=&quot;wrap_content&quot; android:layout_weight=&quot;1&quot;
                      android:text=&quot;Title&quot;
                      android:layout_gravity=&quot;center&quot;
                      android:textSize=&quot;18sp&quot;
                    /&gt;
            &lt;TextView android:layout_width=&quot;wrap_content&quot; android:layout_height=&quot;wrap_content&quot;
                      android:text=&quot;Detail&quot;
                      android:layout_gravity=&quot;center&quot;
                      android:textSize=&quot;18sp&quot;
                    /&gt;
        &lt;/LinearLayout&gt;
    
        &lt;!-- Just for marking place took by view --&gt;
        &lt;FrameLayout android:layout_width=&quot;match_parent&quot; android:layout_height=&quot;match_parent&quot;
                     android:layout_below=&quot;@id/item&quot;
                     android:background=&quot;#88ff55&quot;
                /&gt;
    &lt;/RelativeLayout&gt;

The result:

![Result][4]

As you see, centering is not working. Unfortunately.
(BTW, if specify this 9patch as background for TextView, centering works good. If you know any article, explaining this, please let me know.)

Add bottom margin to last item in Adapter implementation
--------------------------------------------------------

That should work, but for unknown reason I still can&#39;t get it work. 
I don&#39;t like this way, because I don&#39;t like to modify dimensions in code.

So
--

There is already imaginary way – construct some XML drawable with particular bitmap and margin. According to drawables concept it should be possible, but I can&#39;t find implementation. May be somebody knows?

Any other ideas?


  [1]: http://i.stack.imgur.com/m6YY7.png
  [2]: http://i.stack.imgur.com/mnl9p.png
  [3]: http://i.stack.imgur.com/bavem.png
  [4]: http://i.stack.imgur.com/EI64G.png

Adding bottom margin to ListView last element

I&#39;ve been using Twitter&#39;s bootstrap and I would like the text on the progress bar to be centered on the on bar regardless of value.

The below link is what I have now.  I would like all text to be aligned with the bottom most bar.

Screenshot:

![progress bar](http://i.imgur.com/gaE4U.png)

I&#39;ve tried my best with pure CSS and I&#39;m trying to avoid using JS if possible but I&#39;m willing to accept it if it&#39;s the cleanest way to do it.

    &lt;div class=&quot;progress&quot;&gt;
        &lt;div class=&quot;bar&quot; style=&quot;width: 86%&quot;&gt;517/600&lt;/div&gt;
    &lt;/div&gt;


Twitter Bootstrap: Center Text on Progress Bar

I&#39;m trying to center a tkinter window. I know I can programatically get the size of the window and the size of the screen and use that to set the geometry, but I&#39;m wondering if there&#39;s a simpler way to center the window on the screen.

How to center a window on the screen in Tkinter?

It is common to have a set of links in a footer represented in a list, such as:

    &lt;div id=&quot;footer&quot;&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

I want everything inside div#footer to be centered horizontally.  If it was a paragraph, you would just easily say: `p { text-align: center; }`.  Or if I knew the width of the `&lt;ul&gt;` I could just say `#footer ul { width: 400px; margin: 0 auto; }`.

But how do you center the unordered list items without setting a fixed width on the `&lt;ul&gt;`?

EDIT: clarification - the list items should be next to each other, not below.

How to horizontally center an unordered list of unknown width?

I am trying to center a `&lt;ul&gt;` inside a `&lt;div&gt;`. I tried the following

    text-align: center;

and

    left: 50%;

This is not working.

**CSS**:

    .container { 
    	clear: both; 
    	width: 800px; 
    	height: 70px; 
    	margin-bottom: 10px;
    	text-align: center;
    }
    
    .container ul { 
    	padding: 0 0 0 20px; 
    	margin: 0; 
    	list-style: none;
    }
    
    .container ul li { 
    	margin: 0; 
    	padding: 0; 
    }

I want the `ul` to be centered inside the container.

How to horizontally align ul to center of div?

How to horizontally center a floating element of a variable width?

Edit: I already have this working using a containing `div` for the floating element and specifying a `width` for the container (then use `margin: 0 auto;` for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a `width` for the containing element.

How to horizontally center a floating element of a variable width?

When I add a marker from a custom Bitmap, the marker is not centered at the point I specify.


I&#39;m adding it like this:

        // ID tramo
		final int tramoId = tr.getId();
		// Nodos
		final Nodo[] nodos = tr.getNodos();

		final PolylineOptions p = new PolylineOptions();
		MarkerOptions m = new MarkerOptions();
		// Seteamos posicion de linea y marker
		m.position(semisuma(nodos));
		for (final Nodo n : nodos) {
			p.add(n.getLatLng());
		}
		// Color de linea y marker
		BitmapDescriptor icon = null;
		if (tr.getCapacidad() == 0) {
			p.color(0xFF000000);
			m = null;
		} else if (tr.getCapacidad() - tr.getPlazasOcupadas() == 0) {
			p.color(0xEEFF0000);
			final TextDrawable drawable = new TextDrawable(0, 0xEEFF0000,
					0xFFFFFFFF);
			icon = BitmapDescriptorFactory.fromBitmap(fromDrawable(drawable));
		} else {
			p.color(0xEE00FFFF);
			final TextDrawable drawable = new TextDrawable(0, 0xEE00FFFF,
					0xFFFFFFFF);
			icon = BitmapDescriptorFactory.fromBitmap(fromDrawable(drawable));
		}
		if (m != null) {
			m.title(String.valueOf(tramoId));
			m.icon(icon);
		}
		if (polylinesTramo.get(idTramo) != null) {
			polylinesTramo.get(idTramo).remove();
		}
		if (markersTramo.get(idTramo) != null) {
			markersTramo.get(idTramo).remove();
		}
		polylinesTramo.put(idTramo, map.getMap().addPolyline(p));
		if (marker != null) {
			markersTramo.put(idTramo, map.getMap().addMarker(m));
		}
	


This is the code of TextDrawable:


    package com.cidaut.blueparking.ui;
    
    import android.graphics.Canvas;
    import android.graphics.ColorFilter;
    import android.graphics.Paint;
    import android.graphics.PixelFormat;
    import android.graphics.drawable.Drawable;

    public class TextDrawable extends Drawable {
    
    	private final String text;
    	private final Paint paint;
    	private final int centroX = 13;
    	private final int centroY = 16;
    	private final float textSize;
    	private final float whereToDrawX;
    	private final int bgColor;
    
    	public TextDrawable(final int text, final int bgColor, final int textColor) {
    		this(String.valueOf(text), bgColor, textColor);
    	}
    
    	public TextDrawable(final String text, final int bgColor, final int textColor) {
    		this.text = text;
    		this.bgColor = bgColor;
    		this.paint = new Paint();
    		paint.setColor(textColor);
    		paint.setTextSize(14f);
    		paint.setAntiAlias(true);
    		paint.setFakeBoldText(true);
    		paint.setStyle(Paint.Style.FILL);
    		paint.setTextAlign(Paint.Align.LEFT);
    		textSize = paint.measureText(text);
    		whereToDrawX = centroX - (textSize / 2);
    	}
    
    	@Override
    	public void draw(final Canvas canvas) {
    		canvas.drawColor(bgColor);
    		canvas.drawText(text, whereToDrawX, centroY, paint);
    	}
    
    	@Override
    	public void setAlpha(final int alpha) {
    		paint.setAlpha(alpha);
    	}
    
    	@Override
    	public void setColorFilter(final ColorFilter cf) {
    		paint.setColorFilter(cf);
    	}
    
    	@Override
    	public int getOpacity() {
    		return PixelFormat.TRANSLUCENT;
    	}
    }

and here&#39;s the `fromDrawable` method

	protected Bitmap fromDrawable(final Drawable drawable) {
		final Bitmap bitmap = Bitmap.createBitmap(25, 25, Config.ARGB_8888);
		final Canvas canvas = new Canvas(bitmap);
		drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
		drawable.draw(canvas);
		return bitmap;
	}


What should I add to my code to get the markers centered in their positions?

Centering bitmap Marker (Google Maps Android API v2)

I want my `&lt;p&gt;` element to be at the center of a container `&lt;div&gt;`, as in perfectly centered -- the top, bottom, left and right margins split the spaces equally.

How can I achieve that?

    

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-js --&gt;

    div {
      width: 300px;
      height: 100px;
    }
    p {
      position: absolute;
      top: auto;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div&gt;
      &lt;p&gt;I want this paragraph to be at the center, but it&#39;s not.&lt;/p&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



How to center a &lt;p&gt; element inside a &lt;div&gt; container?

Is there any simple way to center a text in textbox? I was looking for some built-in functions, but I found nothing.

All Centering Solutions on Gang of Coders

Total of 30 Centering Solutions